ページとスタイルの調査と編集

By Meggin Kearney

Meggin is a Tech Writer

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

Chrome DevTools の [Elements] パネルを使用して、ページの HTML と CSS を調査してライブ編集します。

TL;DR

• [Elements] パネルで、DOM ツリーの任意の要素を調査し、その場で編集します。
• [Styles] ペインで、選択された任意の要素に適用された CSS ルールを表示して変更します。
• [Computed] ペインで、選択された要素のボックスモデルを表示して編集します。
• [Sources] パネルで、ページに対してローカルで行われた変更を表示します。

DOM ノードのライブ編集

DOM ノードをライブ編集するには、単純に選択された要素をダブルクリックして、変更を行います。

DOM ツリービューには、ツリーの現在の状態が表示されます。これは、別の理由で最初に読み込まれた HTML とは一致しないことがあります。 たとえば、ユーザーは JavaScript を使用して DOM ツリーを変更できます。ブラウザ エンジンがユーザーが作成した無効なマークアップを修正し、その結果予期しない DOM が生成されることがあります。

スタイルのライブ編集

[Styles] ペインで、スタイルのプロパティ名と値をライブ編集します。（ユーザー エージェント スタイルシートと同様に）グレー表示されているスタイルを除き、すべてのスタイルを編集できます。

名前または値を編集するには、その名前または値をクリックして変更を加え、Tab キーまたは Enter キーを押して変更を保存します。

既定では、CSS の変更は永続的ではなく、ページを再読み込みすると変更内容が失われます。 ページが読み込まれた後も変更を保持するには、永続的に作成できるように設定します。

ボックスモデル パラメータの調査と編集

[Computed] ペインを使用して、現在の要素のボックスモデル パラメータを調査して編集します。 ボックスモデルのすべての値は、値をクリックするだけで編集できます。

同心の長方形には、現在の要素の padding、border、margin プロパティの top、bottom、left、right の値が表示されます。

位置が非静的に決定される要素の場合は、position の長方形も表示されます。これには、top、right、bottom、および left プロパティの値が含まれます。

position: fixed と position: absolute 要素の場合は、中央のフィールドに、選択された要素の実際の offsetWidth × offsetHeight ピクセル寸法が表示されます。 すべての値は、[Styles] ペインのプロパティ値と同様に、ダブルクリックするだけで変更できます。 ただし、これは具象要素の位置指定の仕様に従うため、変更が有効になるとは限りません。

ローカル変更の表示

ページに加えたライブ編集の履歴を表示するには、次のようにします。

1. [Styles] ペインで、変更したファイルをクリックします。DevTools で [Sources] パネルが表示されます。
2. ファイルを右クリックします。
3. [Local modifications] を選択します。

変更内容を詳しく調べるには、次のようにします。

• 変更が行われた時間 を表示するには、最上位のファイル名を展開します。
• 変更に対応する diff（変更前と変更後）を表示するには、第 2 レベルの項目を展開します。背景がピンク色の行は削除を示し、緑色の行は追加を示します。

変更を元に戻す

永続的に作成できるように設定していない場合は、ページを再読み込みするたびに、すべてのライブ編集が失われます。

永続的に作成できるように設定している場合、変更を元に戻すには、次のようにします。

• [Elements] パネルで DOM またはスタイルに加えた細かな変更をすばやく元に戻す場合は、Ctrl+Z キー（Windows）または Cmd+Z キー（Mac）を使用します。

• ファイルに加えたローカル変更をすべて元に戻すには、[Sources] パネルを開き、ファイル名の隣にある [revert] を選択します。