Pesticide - 高度な CSS デバッガー

すべての要素にアウトライン（背景色なし）を挿入するだけでなく、サイズとレイアウトも検査します。 CSS ってすごいですね！

Pesticide 3.2は、Chrome用の高度なCSSデバッガーです。レイアウト、スペーシング、タイポグラフィ、計算済みスタイルをページ上で直接検査できます。 有効にして任意の要素にマウスカーソルを合わせると、必要な詳細情報が表示されるフローティングインスペクターが開きます。 - 要素のタグ、ID、クラス - DOMパス - クライアント/オフセット/スクロール寸法 - フルボックスモデル：マージン、ボーダー、パディング、半径、コンテンツサイズ - フォント検査 - 計算済みCSSプロパティ - CSS出力をTailwind、インライン、またはブロック形式でコピー Pesticideの便利な機能： - レイアウトをずらさずにアウトラインベースのデバッグが可能 - スペーシングとスタイルを比較しながら、現在の要素をクリックして固定 - サイズ変更・ドラッグ可能なインスペクターオーバーレイ - サイトごとにパネルの位置とサイズを保存可能 - インスペクターセクションの表示/非表示を切り替えるオプションページ - Ctrl + Shift + Pによるクイックキーボード操作 Pesticideは、フロントエンド開発者、デザイナー、そして複雑なCSSのデバッグを行うすべての方のために開発されました。 Pesticideを使えば、細かいレイアウトチェックのたびに重いツールを開くことなく、ページの構造を視覚的に素早く把握できます。 バージョン3.2の主な機能： - フローティングインスペクターのワークフローの改善 - Tailwind、インライン、ブロック出力に対応したCSSパネルのコピー機能 - フォントと計算スタイルの検査機能 - オプションページからインスペクターセクションをカスタマイズ可能 CSSデバッグを高速化するための軽量なChrome拡張機能をお探しなら、Pesticideが最適です。