ウェブサイト診断のためのGoogleChromeの「検査」ツールの使用

HTMLペインの下部に小さなメニューバーもあります。

これはブレッドクラムトレイルと呼ばれ、選択した要素のすべての親要素が表示されます。これらの要素の1つに移動するには、クリックするだけです。

スタイル

HTMLビューの下には、要素に適用されるCSSルールを表示するペインも表示されます。これは[スタイル]ペインと呼ばれ、この場合、前に調べたアンカータグに適用されるすべてのルールが表示されます。

ルールにカーソルを合わせ、その横にあるチェックボックスをクリックすると、ルールのオンとオフを切り替えることができます。

この変更は、ページプレビューにすぐに反映されます。また、ルールを直接クリックすると、その名前と値を変更できます。

[フィルター]検索ボックスを使用して特定のルールを検索することもできます。

ただし、[スタイル]ペインにはそれ以上の機能があります。スタイルペインの多くの機能の詳細については、Googleのドキュメントをご覧ください。

ボックスモデルと計算されたスタイル

スタイルビューの横には、選択した要素のボックスモデルがあります。ご存じない方のために説明すると、ボックスモデルは、特定の要素に適用される余白、境界線、パディング、コンテンツサイズを抽象化したものです。

この場合、私の要素のプライマリサイズは461x209ピクセルであることがわかります。余白、境界線、またはパディングルールが含まれていないため、これらのボックスは空白です。

位置、マージン、境界線、またはパディングルールのある要素を選択すると、ボックスモデルは次のようになります。

その場でも見ることができます [要素の検査]ツールを有効にしてDOM要素にマウスを合わせると、ボックスモデルになります。

ボックスモデルの下には、この特定の要素に適用されるすべてのスタイル設定ルールのリストがあります。これは、[スタイル]ペインとは少し異なります。 CSSの実際の行は表示されず、それらのルールの効果のみが表示されます。これはオブジェクトの「計算されたスタイル」と呼ばれ、CSSを組み合わせた結果です。

最後に、[フィルター]ボックスに入力して、特定のルールを検索できます。

結論

ウェブページを頻繁に操作する場合は、Chromeの検査ツールを検討する価値があります。また、コンソールやネットワークなどのDevToolsの他のタブは、開発者にとって非常に貴重なものになる可能性があります。今のところカバーできる以上のものがありますが、Google独自のドキュメントは徹底的で便利です。