Google Chromeの「検査」ツールを使用したウェブサイト診断
Google Chromeは、単なる高速な消費者ブラウザではありません。内部には多くの開発者機能が隠されています。「検査」ツールを使用することで、この力の一部を明らかにできます。最初は圧倒されるかもしれませんが、このツールはウェブサイトの構造を理解する手助けをし、自分のサイトのデバッグにも役立ちます。
検査ツールへのアクセス
検査ツールはChromeのコンテキストメニューにあります。
ブラウザ内の任意の要素を右クリックし、コンテキストメニューから「検査」をクリックします。
Chromeブラウザの側面からウィンドウがポップアウトします。これをDevToolsパネルと呼びます。FirefoxのFirebugを使用したことがある場合は、その一部を認識するかもしれません。
ここには多くの情報があるので、個々の部分を見ていきましょう。
検査パネルの検査
検査パネルは、ウィンドウの上部に表示されるいくつかの異なるタブに分かれています。デフォルトの「要素」タブに焦点を当てます。
これらのタブの隣には、2つの便利なボタンがあります。最初のボタンは「要素を検査」ツールです。
このツールを使用すると、マウスオーバーして異なるDOM要素を選択して検査できます。
2つ目のボタンはデバイスプレビューモードをオンにします。このモードでは、異なる解像度や画面サイズでウェブページがどのように見えるかを確認できます。
そのボタンをクリックすると、ウェブページが新しいビューにスナップします。
その後、ページプレビューの上にあるドロップダウンメニューやページプレビューの側面にあるハンドルを使用して、デバイスプレビューウィンドウのサイズを変更できます。
HTMLビュー
DevToolsタブのほとんどはHTMLペインが占めています。
このペインは、強化された「ソースを表示」のようなものです。DOMに従って構造化されており、要素は親要素の中にネストされています。
最初に「検査」した要素は、自動的に灰色または青色の背景でハイライトされます。ここでは、リンク内に含まれる画像を検査しました。予想通り、ハイライトされたアンカータグが表示されます。
しかし、私の画像はどこにあるのでしょうか？アンカータグの横にある開示三角形をクリックすることで、ネストされたDOM要素を表示できます。この場合、矢印は私が見つけることを期待していたタグを表示します。
また、HTMLペインの下部に小さなメニューバーがあることにも気づくでしょう。
これは「パンくずリスト」と呼ばれ、選択した要素のすべての親要素を表示します。これらの要素の1つに移動するには、単にクリックします。
スタイル
HTMLビューの下には、要素に適用されるCSSルールを表示するペインがあります。これをスタイルペインと呼び、ここでは以前に検査したアンカータグに適用されるすべてのルールが表示されます。
ルールの上にマウスをホバーし、隣のチェックボックスをクリックすることで、ルールをオンまたはオフにできます。
この変更は、ページプレビューにすぐに反映されます。また、ルールを直接クリックすると、その名前と値を変更できます。
特定のルールを検索するには、フィルター検索ボックスを使用できます。
ただし、スタイルペインはそれ以上のことができます。スタイルペインの多くの機能については、Googleのドキュメントを確認してください。
ボックスモデルと計算スタイル
スタイルビューの隣には、選択した要素のボックスモデルがあります。ボックスモデルは、特定の要素に適用されるマージン、ボーダー、パディング、およびコンテンツサイズの抽象的な描写です。
この場合、要素の主なサイズは461 x 209ピクセルです。マージン、ボーダー、またはパディングルールはないため、これらのボックスは空白です。
位置、マージン、ボーダー、またはパディングルールを持つ要素を選択すると、ボックスモデルは次のように見えるかもしれません。
また、要素をマウスオーバーすると、インサイトボックスモデルを表示できます。
ボックスモデルの下には、この特定の要素に適用されるすべてのスタイルルールのリストがあります。これはスタイルペインとは少し異なります。実際のCSSの行は表示されず、これらのルールの効果のみが表示されます。これはオブジェクトの「計算スタイル」と呼ばれ、CSSの合成結果です。
最後に、フィルターボックスに入力することで特定のルールを検索できます。
結論
ウェブページを頻繁に扱う場合、Chromeの検査ツールは探求する価値があります。また、ConsoleやNetworkなどのDevToolsの他のタブは、開発者にとって非常に貴重です。今すぐカバーできる以上のことがありますが、Googleのドキュメントは詳細で役立ちます。
