Chrome デベロッパーツール Elementsパネルの使い方

Chrome デベロッパーツールのElementsパネルでは、WebページのHTML/CSSを検証することができます。Web制作者が最もよく使うデベロッパーツールの機能です。ブラウザでの表示がおかしい時は、とにかくこの機能を使ってデバッグするのが問題解決の早道となります。

Elementsパネルでは具体的に以下のことが可能です。

  • ページに表示している要素に対応するHTMLとCSSを検索する。
  • HTMLを編集してページ内容を変更する。
  • CSSを編集してページスタイルを変更する。
  • DOM elementにブレークポイントを設定してデバッグする。
  • 要素に設定されたイベントを確認する。

【コンテンツ】

  1. Elementsパネル外観
  2. ナビゲーション部
  3. DOMツリーの操作
  4. 要素を検索する
  5. 要素のHTML/CSSを確認する
  6. HTMLを編集する
  7. CSSを編集する

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

Elementsパネル外観

デベロッパーツールを下側に表示したときの外観です。

デベロッパーツール外観(下側)

デベロッパーツールを右側に表示したときの外観です。
この外観は、SettingパネルでAppearanceの[Split panels vertically when docked to right]にチェックが入っている状態です。

デベロッパーツール外観(右側)

1 このエリアでは、DOMツリービューでHTMLコードを表示します。

2 DOMツリーで選択している要素に設定されているCSSコードを表示します。

3 DOMツリーで選択している要素の位置関係を示すMetricsをボックスモデルで表示します。

4 DOMツリーで選択している要素に最終的に適用されているCSSプロパティを表示します。
なおデベロッパーツールを下側または別ウィンドウで表示しているときは、
この部分はComputedサブパネルに表示されます。

ナビゲーション部

ナビゲーション画面

1 ツールバー
タブで8つのパネルを切り替えます。
また各アイコンは以下の操作になります。

サーチアイコン:サーチアイコン
クリックするとインスペクトモードになり要素を検索できます。
インスペクトモードは1クリックだけ有効です。

Show/Hide drawer アイコン:Show/Hide drawer アイコン
クリックするとConsoleパネルが現在のパネルの下側に表示されます。
トグルになっており、もう一度クリックするとConsoleパネルが閉じます。

Settings アイコン:Settings アイコン
クリックすると各種設定ができるSettingsパネルが表示されます。

ウィンドウ表示位置切り替えアイコン:ウィンドウ表示位置切り替えアイコン
デベロッパーツールの表示位置を、右側/下側/別ウィンドウと切り替えることができます。

終了アイコン:終了アイコン
クリックするとデベロッパーツールが終了します。

2 サブパネル切り替えタブ
サブパネル(サイドバー)に表示している内容を切り替えます。

3 パンくずナビ
現在選択されているDOMノードが青くハイライトします。
ノード名をクリックすることで階層を移動することができます。

DOMツリーの操作

DOMツリーは最初折りたたまれた状態で表示されます。
各ノードには(下向き三角)、もしくは(右向き三角)の記号が付いています。
はノードを展開できることを示しています。

展開するには、をクリックします。
展開するとに変わりますので、もう一度クリックすると折りたたまれます。

またノードを選択した状態で、右矢印キーを押すと展開され、左矢印キーを押すと折りたたまれます。

DOMツリー図

要素を検索する

ページに表示されている要素をDOMツリービューで検索し、HTMLコードやCSSを確認するには以下のようにします。

  1. サーチアイコンをクリックしてインスペクトモードにします。[Ctrl]+[Shift]+[C]を押しても同じです。
    ツールバー
  2. ページ上で要素をクリックします。このときリンクがはられていても、インスペクトモードではリンク先へ移動しません。
    要素のクリック図
  3. クリックした要素に対応するノードがハイライトします。
    ハイライトしたノード

あるいはもっと簡単な方法があります。
要素の上で右クリックし、[要素の検証]を選択します。
これで同様の結果となります。

要素検索の右クリックメニュー

要素のHTML/CSSを確認する

Webページでの表示

DOMツリービューでカーソルをおいた要素がWebページで青くハイライトします。
このとき要素のwidth、height、ID、クラスがツールチップで表示されます。
またmarginはオレンジで、paddingはグリーンでその範囲が表示されます。

Webページ上での選択した要素表示

CSSコードの確認

選択している要素に設定されているCSSコードは、Stylesサブパネルで確認します。
a要素については疑似クラスを以下のように指定することができます。

  1. [Toggle Element State]アイコンをクリックします。
    Toggle Element Stateアイコン
  2. 疑似クラスにチェックを入れます。
    疑似クラスチェックボックス
  3. チェックを入れた疑似クラスのCSSが追加で表示されます。
    疑似クラスCSSの追加
  4. DOMツリービューでは、疑似クラスを指定したノードにマークがつきます。
    ノードにマーク付加

最終的に適用されているCSSプロパティの確認

Computedサブパネルでは、選択している要素に最終的に適用されているCSSプロパティとその値が確認できます。
デベロッパーツールを右側に表示しているときは、Stylesサブパネルを選択するとCSSプロパティも同時に表示されますのでComputedタブはありません。

Computedサブパネル

Metricsの確認

要素の位置関係を示すMetricsでは、以下の値が確認できます。
position、margin、border、padding、要素の大きさ(width, height)

Metrics図

Metrics上にカーソルをおくと、対応する部分がページ上でハイライトします。

Metrics部分のハイライト

HTMLを編集する

タグと属性の編集

タグ編集は、DOMツリービューでタグをダブルクリックします。

タグの編集

属性編集は、DOMツリービューで属性をダブルクリックします。
右クリックして[Edit attribute]でも同様の操作になります。

属性の編集

なお編集モード中にTabキーを押すと次の属性に移動します。最後の属性のときにTabキーを押すと、新規の属性を追加するフィールドが現れます。

属性の追加は右クリックして[Add attribute]でも可能です。

HTMLコードの編集

DOMツリービューで、ノード上で右クリックし[Edit as HTML]を選択します。

HTML編集メニュー

ノードに含まれるHTMLコードが子ノードも含めてボックス内に表示され、編集できるようになります。

HTML編集ボックス

編集が終了したら、ボックスの外をクリックして編集モードを終了させます。

F2キーを押すことでも、編集モードとノード選択モードのトグル切り替えができます。

ノードの移動

ノードはドラッグ&ドロップすることで、DOMツリー内を移動することができます。

ノードのドラッグ&ドロップ

ノードの削除

ノード上で右クリックして[Delete node]を選択すると、ノードを削除できます。

ノード削除メニュー

CSSを編集する

StylesサブパネルではCSSを編集することができます。

セレクタの編集

セレクタをクリックして編集します。

セレクタ編集

プロパティの編集

プロパティをクリックして、プロパティ名あるいは値を編集します。

プロパティ編集

プロパティの無効化

プロパティの前にあるチェックを外すと、そのプロパティは無効になります。

プロパティの無効化

プロパティの追加

CSSルールの中の空白部分をクリックすると、プロパティを追加するフィールドが現れプロパティを追加できます。

プロパティの追加

プロパティは直接入力してもよいですが、入力途中でリストから選択することもできます。

プロパティ選択リスト

プロパティ名の入力が完了したら、Enterキーを押すと値を入力するフィールドにカーソルが移動します。
値の入力が完了したら、CSSルールの外の部分をクリックすると編集モードが終了します。

プロパティの削除

プロパティ名をクリックしてDeleteキーを押します。
次にCSSルールの外の部分をクリックするとプロパティは削除されます。

インラインスタイルの追加

要素にstyle属性を指定するインラインスタイルを追加するには、
「element.style」の部分に記述します。

element.styleフィールド

新しいCSSルールの追加

[New Style Rule]アイコンをクリックすると、セレクタから入力できる新しいフィールドが現れます。

新規フィールド

スポンサーリンク

ページの先頭へ