Google Chromeの「検証」ツールでウェブサイトを診断・デバッグする方法

Google Chromeは高速なブラウザであるだけでなく、内部には開発者向けの強力な機能が数多く隠れています。「検証（Inspect）」ツールを使えば、その一部を簡単に活用できます。最初は操作画面に圧倒されやすいツールですが、使いこなせるようになると、ウェブサイトがどのように構築されているのかを深く理解できるようになり、自分のサイトのデバッグにも大いに役立ちます。

検証ツールを起動する方法

検証ツールは、Chromeの右クリックメニューからすぐに呼び出せます。

ブラウザ上の任意の要素を右クリックし、コンテキストメニューから「検証」を選択してください。

すると、Chromeウィンドウの側面にパネルが表示されます。これが「DevTools（デベロッパーツール）」パネルです。以前にFirefoxでFirebugを使用したことがある方なら、どこか見覚えのある構成だと感じるかもしれません。

表示される情報量は非常に多いので、ここから各機能をひとつずつ見ていきましょう。

DevToolsパネルの基本構成

検証パネルは、ウィンドウ上部に並ぶ複数のタブによっていくつかのセクションに分かれています。本記事では、デフォルトで表示される「Elements（要素）」タブに焦点を当てて解説します。

タブの横には、便利なボタンが2つ配置されています。1つ目は「要素を検証」ツールです。

このツールを有効にすると、マウスオーバーだけでページ上のさまざまなDOM要素を選択し、その詳細を調べられるようになります。

2つ目のボタンは「デバイスプレビュー」モードの切り替えです。このモードでは、さまざまな解像度や画面サイズでウェブページがどのように表示されるかを事前に確認できます。

ボタンをクリックすると、表示中のウェブページが新しいプレビュービューに切り替わります。

プレビュー上部のドロップダウンメニューからデバイスを選んだり、プレビュー両端のハンドルをドラッグしたりして、表示サイズを自由に変更できます。

HTMLビュー

DevToolsタブの大部分を占めているのが、HTMLペインです。

このペインは、いわば「超強力版のソース表示」です。DOM構造に沿って、要素が親要素の中に入れ子状に整理されて表示されます。

最初に「検証」した要素は、グレーまたは青色の背景色で自動的にハイライト表示されます。たとえばここでは、リンク内に含まれる画像を検証しました。予想どおり、ハイライトされたアンカータグが表示されています。

「画像はどこにあるの？」と思った方も安心してください。アンカータグ内に入れ子になったDOM要素は、<a>の横にある三角形のアイコンをクリックすると展開できます。今回の場合、探していた<img>タグが現れました。

さらに、HTMLペインの下部には小さなメニューバーが表示されていることにお気づきでしょうか。

これは「パンくずリスト」と呼ばれるもので、現在選択中の要素の親要素がすべて表示されます。移動したい要素をクリックするだけで、その階層へジャンプできます。

スタイル（Styles）

HTMLビューの下には、選択した要素に適用されているCSSルールを一覧表示するペインがあります。これが「Styles（スタイル）」ペインで、先ほど検証したアンカータグに適用されたすべてのルールを確認できます。

ルールにマウスオーバーして横のチェックボックスをクリックすると、そのルールのオン／オフを切り替えられます。

変更内容はページプレビューに即座に反映されます。また、ルール自体を直接クリックすれば、プロパティ名や値をその場で編集することも可能です。

Filter検索ボックスを使えば、目的のルールを素早く絞り込んで検索することもできます。

ただし、Stylesペインの機能はこれだけにとどまりません。詳細な機能については、Googleの公式ドキュメントで詳しく解説されているので、ぜひ一度目を通しておくことをおすすめします。

ボックスモデルと計算済みスタイル

スタイルビューの隣には、選択した要素の「ボックスモデル」が表示されます。ボックスモデルとは、ある要素に適用されるmargin（マージン）、border（境界線）、padding（パディング）、そしてコンテンツ本体のサイズを抽象化して図式化したものです。

この例では、要素の基本サイズが461×209ピクセルであることがわかります。margin、border、paddingに関する指定がないため、対応するボックスは空白で表示されています。

一方、位置指定やmargin、border、paddingなどのルールを持つ要素を選択すると、ボックスモデルは次のようにより詳細な形で表示されます。

また、「要素を検証」ツールを有効にした状態でDOM要素にマウスオーバーすると、実際のページ上でもボックスモデルをその場で視覚的に確認できます。

ボックスモデルの下には、この要素に適用されているすべてのスタイルルールの一覧が表示されます。これはStylesペインとは少し性質が異なります。ここではCSSのコードそのものではなく、それらのルールが適用された「結果」のみが表示されます。これをオブジェクトの「計算済みスタイル（computed style）」と呼び、複数のCSSが組み合わさった最終的な反映結果を意味します。

こちらでも同様に、Filterボックスにキーワードを入力することで、特定のルールを検索できます。

まとめ

ウェブページの制作や管理に日常的に携わっているなら、Chromeの検証ツールは習得する価値が十分にあるツールです。さらに、DevToolsには「Console（コンソール）」や「Network（ネットワーク）」など、開発者にとって非常に有用なタブが他にも揃っています。本記事では紹介しきれませんでしたが、Googleの公式ドキュメントが充実しているので、気になる方はぜひそちらも参照してみてください。