CSS Inspector は、マウスを合わせるだけで任意の要素の完全な CSS プロパティを表示できる強力な開発者ツールです。クリックしてスタイルをロックし、直接編集して、変更が即座にページに反映されるのを確認できます。
レイアウトの問題をデバッグするときも、気に入ったデザインを解析するときも、余白やタイポグラフィの値をさっと確認したいときも、CSS Inspector はシンプルなフローティングパネルで必要な情報をすべて提供します。ブラウザの DevTools と異なり、パネルがドッキングされたりビューポートが縮小されたりすることはありません。要素にカーソルを合わせてクリックするだけで、すぐに検査できます。このツールが表示するのは記述された CSS だけでなく、実際にブラウザがレンダリングしている計算後のスタイル(computed style)です。つまり、継承・詳細度・カスケードがすべて解決された後の、ユーザーが画面で実際に目にしているのと同じ値を確認できます。
要素を検査してもページ自体のリフローやリペイントが発生することはないため、スクロール位置やアニメーション、JavaScript の状態を乱す心配なく自由に探索できます。::before や ::after といった疑似要素にも対応しており、親要素にカーソルを合わせると、生成されたコンテンツのスタイルを元の要素のスタイルとは別に表示します。CSS カスタムプロパティ(変数)は最終的な計算値に解決されますが、パネルにはその値を生成した変数名も併せて表示されるため、単なるピクセル値としてではなく、色や間隔の値がどのデザイントークンに由来するのかまで遡って確認できます。
日常的な作業では、多くの開発者が1セッションのうちに何十回も CSS Inspector を使用します。マージンが相殺された原因を調べたり、スタイルシートにコピーする前に HEX コードを確認したり、メディアクエリのブレークポイントが意図通りにスタイルを適用しているかを検証したりする場面です。ブラウザ全体を占有するモードではなくフローティングパネルであるため、開いたままタブを切り替えて自分のコードエディタやデザインファイルを確認し、位置を見失うことなくそのまま同じ要素へ戻ってくることができます。
要素にマウスを合わせると、フォント、サイズ、色、間隔などを即座に確認できます。
要素をクリックしてパネルを固定し、詳細な検査を行えます。
値をダブルクリックして直接変更します。編集内容は即座にページに反映されます。
個々のプロパティまたはスタイルブロック全体をワンクリックでクリップボードにコピーできます。
マージン、ボーダー、パディングの値を視覚的に確認できます。
ページ上の要素の幅、高さ、位置を表示します。
CSS Inspector は 40 以上のプロパティを表示します：
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursor位置がずれている要素をピンポイントで検査します。
お気に入りのウェブサイトのスタイルを研究します。
コードを書く前に変更をテストします。
ミーティング中にライブで変更を提示します。
新しい要素の CSS コードを簡単に取得できます。
DevSuite Pro ツールバーから CSS Inspector アイコンをクリックします。
任意の要素にカーソルを合わせてプロパティを確認します。
要素をクリックしてパネルをピン留めします。
値をダブルクリックして調整します。
更新されたコードをコピーしてプロジェクトで使用します。