Chrome DevTools の使い方

Styles

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

既定では、CSS の変更は永続的ではなく、ページを再読み込みすると変更内容が失われます。ページが読み込まれた後も変更を保持するには、永続的に作成できるように設定します。DevTools ワークスペースによる永続化の設定については、以下のリンクを参照してください。

Computed

Computed ペインでは、選択されている要素に割り当てられたスタイルがボックスモデルとして表示されます。Computed ペインの CSS を編集することはできませんが、プロパティをクリックすると、編集可能な Styles ペインにジャンプできます。

Filter 機能では、CSS のプロパティをフィルタリングすることができます。また show all にチェックを入れると、スタイル定義の有無に関係なく、すべてのプロパティを参照できます。

Event Listeners

Event Listeners ペインでは、DOM ノードに関連付けられている JavaScript のイベントリスナーを表示します。

Event Listeners では Ancestors と Framework listeners のオプションがあります。Ancestors は、現在選択されているノードのイベントリスナーに加えて、そのノードの祖先のイベントリスナーも表示するオプションです。Ancestors のチェックがオフになっている場合、現在選択されているノードのイベントリスナーのみが表示されます。Framework listeners は、JQuery などのフレームワークにイベントリスナーが定義してある場合でも追跡できるようにするオプションです。Framework listeners のチェックがオンになっている場合、DevTools は自動的にイベントコードのフレームワーク、またはライブラリがラップしている部分を解決し、コードのどこにイベントがバインドされているかを通知します。

各イベントリスナーには handler と useCapture のプロパティがあります。handler プロパティは、コールバック関数を含みます。関数を右クリックし Show Function Definition を選択すると、関数が定義されている場所が表示されます。useCapture のプロパティは、addEventListener に useCapture フラグが設定されていたかどうかを示すブール値です。

DOM Breakpoints

DOM Breakpoints ペインでは、任意の要素について「要素のサブツリーの変更」、「属性の変更」、「要素の削除」が発生したタイミングでブレークポイントを設定できます。

任意の要素にブレークポイントを設定することで、動的に変更するスクリプトの構造を知らなくても定義されている部分を調べることができます。

ブレークポイントの設定方法は、HTML の任意の要素を右クリックして Break on... を選択します。その中に、Subtree modifications (要素のサブツリーの変更)、Attribute modifications (属性の変更)、Node removal (要素の削除) の選択肢があります。その選択肢の中から、どのタイミングでブレークさせるかを選択します。設定したブレークポイントは、Sources パネルの DOM Breakpoints から有効・無効の切り替え、および削除ができます。

Properties

Properties ペインでは、各要素のプロパティ値の情報を一覧で取得できます。

Accessibility

Accessibility ペインでは Accessibility Tree、ARIA Attributes、Computed Properties の情報を参照することができます。

Accessibility Tree は選択した要素の祖先要素がツリー状に表示されます。このツリーは、ブラウザがスクリーンリーダーに提示する内容です。ブラウザは DOM ツリーを取得して、支援技術に使いやすい形式に変更します。この変更したツリーをアクセシビリティツリーと呼びます。

ARIA Attributes では選択した要素の ARIA 関連の属性情報が表示されます。ARIA とは Accessible Rich Internet Applications の略で、Web コンテンツや Web アプリケーションを、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。

Computed Properties では選択した要素の計算されたプロパティ値が表示されます。プロパティが重複している場合、優先度によって最終的に適用されるプロパティが決まります。逆に適用されなかったプロパティは、打ち消し線が引かれます。

メッセージスタッキング

連続して繰り返されるメッセージの場合は、各インスタンスが新しい行に出力されるのではなく、スタックされて左側の余白に数字が表示されます。この数字は、メッセージが繰り返された回数を示します。

メッセージが記録されるたびに１行ずつエントリを表示するには、DevTools の設定で [Show timestamps] をオンにします。

[Show timestamps] をオンにすると、メッセージスタッキングされていた各メッセージはタイムスタンプ付きで個々の行に表示されます。

コンソールの履歴

コンソールには打ち込んだコマンドの履歴があり、その履歴はクリア、保持、保存ができます。

履歴のクリアは、以下のいずれかの方法でクリアできます。

• コンソール内を右クリックし Clear console をクリックします。
• コンソールで clear() と入力します。
• JavaScript コード内から console.clear() を呼び出します。
• Ctrl + L を押します (Mac、Windows、Linux)。

ページを更新または変更してもコンソール履歴を保持するには、コンソールの上部にある Preserve log チェックボックスをオンにします。コンソールをクリアするかタブを閉じるまでメッセージは保存されます。

コンソールの出力をログファイルに保存するには、コンソール内で右クリックして Save as を選択します。

実行コンテキストの選択

下記のドロップダウンメニューは Execution Context Selector と呼ばれています。コンテキストは通常 top（ページの一番上のフレーム）に設定されています。他のフレームや拡張機能はそれぞれのコンテキストで動作します。こうした他のコンテキストを使用するには、このドロップダウンメニューから選択する必要があります。

top 以外のコンテキストでは Execution Context Selector が下記のように赤くハイライト表示されます。これは、デベロッパーが top 以外のコンテキストで作業する必要がないため、誤ったコンテキストが選択されていないことを通知するための仕組みです。

コンソール出力のフィルタリング

コンソール出力をフィルタするには、以下のドロップダウンメニューから選択します。

All levels

Verbose、Info、Warnings、Errors のレベルをコンソール出力します。

Default levels

Info、Warnings、Errors のレベルをコンソール出力します。

Verbose

console.debug() からの出力のみを表示します。

Info

console.info() からの出力のみを表示します。

Warnings

console.warn() からの出力のみを表示します。

Errors

console.error() からの出力のみを表示します。

コンソールの設定

コンソールの設定は右上の歯車アイコンから表示します。

Hide network

デフォルトではコンソールではネットワーク問題が報告されます。Hide network のチェックをオンにすると、コンソールにこれらのエラーのログが表示されなくなります。例えば、404 シリーズや 500 シリーズのエラーはログに記録されません。

Preserve log

ページの更新または操作中にコンソール履歴を保持します。

Selected context only

表示中のコンテキストからのメッセージのみ出力します。

Group similar

同様のコンソールメッセージをグループ化します。

Log XMLHttpRequests

各 XMLHttpRequest をコンソールに記録するかどうかを決定します。

Eager evaluation

コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。

Autocomplete from history

コンソールの履歴からオートコンプリートを有効にします。

Evaluate triggers user activation

ユーザのアクティベーション (悪用可能な API の使用を制限するアクティブなユーザインタラクション) を評価します。例えば、ポップアップを開く、画面が振動するなどです。Evaluate triggers user activation のチェックをオフにすると、ユーザのアクティベーションを抑制します。

コンソールの設定は DevTools の設定でも行えます。

Hide network messages

デフォルトではコンソールではネットワーク問題が報告されます。Hide network のチェックをオンにすると、コンソールにこれらのエラーのログが表示されなくなります。例えば、404 シリーズや 500 シリーズのエラーはログに記録されません。

Selected context only

表示中のコンテキストからのメッセージのみ出力します。

Log XMLHttpRequests

各 XMLHttpRequest をコンソールに記録するかどうかを決定します。

Show timestamps

メッセージスタッキングされていた各メッセージはタイムスタンプ付きで個々の行に表示されます。詳細は、前述したメッセージスタッキングを参照してください。

Autocomplete from history

コンソールの履歴からオートコンプリートを有効にします。

Group similar

同様のコンソールメッセージをグループ化します。

Eager evaluation

コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。

Evaluate triggers user activation

ユーザのアクティベーション (悪用可能な API の使用を制限するアクティブなユーザインタラクション) を評価します。例えば、ポップアップを開く、画面が振動するなどです。Evaluate triggers user activation のチェックをオフにすると、ユーザのアクティベーションを抑制します。

Preserve log upon navigation

ページの更新または操作中にコンソール履歴を保持します。

Enable custom formatters

Custom Object Formatters を有効にします。Custom Object Formatters とは、コンソールに表示するフォーマット形式をオリジナルな形式で表示できる機能です。

コード行ブレークポイント

コード行ブレークポイントは、調査が必要なコード部分が厳密にわかっている場合に使用します。DevTools はこのコード行が実行される前に必ず一時停止します。DevTools でコード行ブレークポイントを設定する手順は、次のとおりです。

1. [page] タブをクリックします。
2. ブレークポイントを配置する対象のコード行を含むファイルを開きます。
3. 対象のコード行に移動します。
4. コード行左側の行番号列をクリックします。
5. 番号列の上に青いアイコンが表示されます。

コード行ブレークポイントの配置は、GUI で設定する以外にコード内に設定することもできます。コード内にコード行ブレークポイントの配置するには、debugger を呼び出します。

console.log('a');
console.log('b');
debugger;
console.log('c');

条件付きコード行ブレークポイント

条件付きコード行ブレークポイントは、調査が必要な厳密なコード部分はわかっているが、他の一定の条件が真である場合にのみ一時停止するという場合に使用します。条件付きコード行ブレークポイントを設定する手順は、次のとおりです。

1. [page] タブをクリックします。
2. ブレークポイントを配置する対象のコード行を含むファイルを開きます。
3. 対象のコード行に移動します。
4. コード行左側の行番号列を右クリックします。
5. [Add conditional breakpoint] を選択します。
6. ダイアログに一時停止する条件を入力します。
7. 番号列の上にオレンジ色のアイコンが表示されます。

コード行ブレークポイントの管理

配置したコード行のブレークポイントは、[Breakpoints] ペインから無効化、または削除することができます。以下の画像では、6 行目と 9 行目にブレークポイントが配置されていることがわかります。

ブレークポイントを無効化するには、ブレークポイントのエントリー横にあるチェックボックスをオフにします。ブレークポイントを削除するには、ブレークポイントのエントリー上で右クリックし、[Remove breakpoint] を選択します。

[Breakpoints] ペイン上で右クリックしたときのメニューと効果は以下のとおりです。

Remove breakpoint

対象のブレークポイントを削除します。

Deactive breakpoints / Active breakpoints

すべてのブレークポイントを無効化 / 有効化（非アクティベート / 再アクティベート）します。Deactive / Active は Disable / Enable と違い、ブレークポイントのオン・オフ状態を保持します。

Disable all breakpoints / Enable all breakpoints

すべてのブレークポイントを無効化 / 有効化します。チェックボックスのオン・オフを切り替えるため、変更前の状態は保持されません。

Remove all breakpoints

すべてのブレークポイントを削除します。

Remove other breakpoints

対象のブレークポイント以外を削除します。

DOM 変更ブレークポイント

DOM ノード、またはその子ノードを変更するコードで一時停止するときは、DOM 変更ブレークポイントを使用します。DOM 変更ブレークポイントを設定する手順は、次のとおりです。

1. [Elements] パネルをクリックします。
2. ブレークポイントを設定する要素に移動します。
3. その要素を右クリックします。
4. [Break on] から [Subtree modifications]、[Attribute modifications]、[Node removal] のいずれかを選択します。

Subtree modifications

現在選択されているノードの子が削除、追加、または子の内容が変更されたときにトリガーされます。子ノードの属性が変更された場合、または現在選択されているノードが変更された場合はトリガーされません。

Attributes modifications

現在選択されているノードに対して属性が追加または削除された場合、あるいは属性値が変更された場合にトリガーされます。

Node Removal

現在選択されているノードが削除された場合にトリガーされます。

XHR ブレークポイント

XHR ブレークポイントは、指定された文字列が XHR のリクエスト URL に含まれているときに一時停止する場合に使用します。DevTools は XHR が send() を呼び出す箇所でコード行を一時停止します。XHR ブレークポイントの使い方の例としては、ページがリクエストしている URL が間違っていて、間違ったリクエストの原因となっている AJAX または Fetch ソースコードをその場で確認したいという場合です。XHR ブレークポイントを設定する手順は、次のとおりです。

1. [Sources] パネルをクリックします。
2. [XHR Breakpoints] ペインを展開します。
3. [Add breakpoint] をクリックします。
4. 出現時に一時停止する文字列を入力します。DevTools は、この文字列が XHR のリクエスト URL に出現するすべての箇所で一時停止します。

イベントリスナーブレークポイント

イベントリスナーブレークポイントは、イベントが発生した後で実行されるイベントリスナーコードで一時停止する場合に使用します。特定のイベント（click など）、またはイベントのカテゴリ（すべてのマウスイベントなど）を選択することができます。イベントリスナーブレークポイントを設定する手順は、次のとおりです。

1. [Sources] パネルをクリックします。
2. [Event Listener Breakpoints] ペインを展開します。
3. 発生したら一時停止するイベントのカテゴリにチェックを入れる、またはカテゴリを展開して特定のイベントにチェックを入れます。

例外ブレークポイント

例外ブレークポイントは、捕捉された例外、または捕捉されていない例外をスローしているコード行で一時停止する場合に使用します。例外ブレークポイントを設定する手順は、次のとおりです。

1. [Sources] パネルをクリックします。
2. [Pause on exceptions] をクリックします。（有効になると青色に変わります）
3. 捕捉されていないで例外に加えて捕捉された例外でも一時停止する場合は、[Pause On Caught Exceptions] チェックボックスをオンにします。

関数ブレークポイント

関数ブレークポイントは、特定の関数が呼び出された場合に一時停止するときに使用します。関数ブレークポイントを配置するには、debug(functionName) を呼び出します（functionName はデバッグする関数）。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.

DevTools は、デバッグする関数がスコープ内にないと ReferenceError をスローします。

(function () {
  function hey() {
    console.log('hey');
  }
})();
debug(hey); // ReferenceError

ネットワークリクエストの記録

Network パネルでは、すべてのネットワークリクエストを記録します。

ネットワークリクエストの記録を停止するには、以下の方法があります。

• Stop recording network log をクリックします。
• Ctrl+ E (Windows、Linux)、または Cmd + E (Mac) を押します。

ネットワークリクエストの記録をクリアするには、Clear ボタンをクリックします。

ネットワークリクエストの記録を保存するには、Preserve log のチェックボックスをオンにします。通常、ページを更新するたびにネットワークリクエストの記録はクリアされますが、Preserve log のチェックボックスをオンにすることでリクエストがクリアされず保存することができます。

読み込み動作の変更

ブラウザのキャッシュを無効にするには、Disable cache のチェックボックスをオンにします。Disable cache のチェックボックスをオンにすると、disk cache や memory cache を無効化できます。ただし、PWA の ServiceWorker は無効にならない点に注意してください。完全にクリーンな状態でネットワークリクエストの記録をするためには、スーパーリロードを行ってください。

ブラウザのキャッシュを手動でクリアする場合、リクエストテーブルを右クリックし、Clear Browser Cache を選択します。

ブラウザの Cookie を手動でクリアする場合、リクエストテーブルを右クリックし、Clear Browser Cookies を選択します。

遅いネットワークや、オフラインの状態をシミュレーションするには、スロットリングのメニューからプロファイルを選択します。メニューには、Fast 3G、Slow 3G、Offline があります。例えば、Offline のシミュレーションでは、PWA をオフライン環境で動作確認したい場合に役立ちます。

ネットワーク速度をカスタムして追加したい場合は、スロットリングメニューの Add を選択します。Add を選択すると、ネットワークのカスタムプロファイルを自由に設定できます。

リクエストのフィルタリング

リクエストをフィルタリングするには、[Filter] テキストボックスを使用して、リクエストの「ドメイン」や「サイズ」などのプロパティを入力します。テキストボックスが表示されていない場合、フィルターのアイコンをクリックしてください。

各プロパティをスペースで区切ることによって、複数のプロパティを同時に指定することができます。プロパティを同時に指定する場合は AND 条件であり、OR 条件はサポートされていません。サポートされているプロパティは以下のとおりです。

domain

指定されたドメインのリソースを表示します。ワイルドカード文字 (*) を使用して、複数のドメインを含めることができます。DevTools は、検出されたすべてのドメインをオートコンプリートドロップダウンメニューに追加します。

has-response-header

指定された HTTP レスポンスヘッダーを含むリソースを表示します。DevTools は、検出されたすべてのレスポンスヘッダーをオートコンプリートドロップダウンに取り込みます。

HTTP ヘッダー - HTTP | MDN

is

キャッシュからのリクエスト (from-cache)、まだ終了していないリクエスト (running)、ServiceWorker からのリクエストを表示します。

larger-than

指定されたサイズ (バイト単位) よりも大きいリソースを表示します。単位も指定可能で、1000 バイトは 1k と書くこともできます。

method

指定された HTTP メソッドタイプで取得されたリソースを表示します。DevTools は、検出されたすべてのHTTPメソッドをドロップダウンに取り込みます。

HTTP リクエストメソッド - HTTP | MDN

mime-type

指定された MIME タイプのリソースを表示します。DevTools は、検出されたすべてのMIMEタイプをドロップダウンに追加します。

MIME タイプ (IANA メディアタイプ) - HTTP | MDN

mixed-content

すべての混合コンテンツリソース（mixed-content:all）、または現在表示されているリソース（mixed-content:displayed）のみを表示します。

scheme

保護されていない HTTP（scheme:http）、または保護された HTTPS（scheme:https）で取得したリソースを表示します。

set-cookie-domain

指定された値と一致する Set-Cookie の domain 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての domain をオートコンプリートに取り込みます。

Set-Cookie - HTTP | MDN

set-cookie-name

指定された値と一致する Set-Cookie の name 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての name をオートコンプリートに取り込みます。

Set-Cookie - HTTP | MDN

set-cookie-value

指定された値と一致する Set-Cookie の value 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての value をオートコンプリートに取り込みます。

Set-Cookie - HTTP | MDN

status-code

HTTP ステータスコードが指定されたコードと一致するリソースのみを表示します。DevTools は、検出されたすべてのステータスコードをオートコンプリートドロップダウンメニューに取り込みます。

HTTPステータスコード - Wikipedia

リクエストタイプ別にフィルタリングするには、ネットワークパネルで XHR、JS、CSS、Img、Media、Font、Doc、WS (WebSocket)、Manifest、Other (リストにないタイプ) ボタンをクリックします。複数のタイプフィルターを同時に有効にするには、Cmd (Mac)、または Ctrl (Windows、Linux) を押しながらクリックします。

時間別にフィルタリングするには、Overview ペインで左クリックしてドラッグすると、その期間中にアクティブだったリクエストのみを表示できます。選択された期間をクリアするには、Overview ペインをダブルクリックすると元に戻ります。

データ URL のリクエストを非表示にするには Hide data URLs のチェックボックスをオンにします。データ URL とは、他のドキュメントに埋め込まれた小さなファイルです。データ URL は、リクエストテーブルに data: から始まるファイルとして表示されます。

リクエストの並び替え

リクエストを並び替えるためには、リクエストテーブルのヘッダーをクリックします。クリックされた列でリクエストが昇順、または降順に並び替えられます。

Waterfall 列に表示されたリクエストは、アクティビティフェーズ毎に並び替えることができます。リクエストテーブルのヘッダーを右クリックし、Waterfall から以下のいずれかのオプションを選択します。

Start Time (開始時間)

リクエストが開始された時間順に並び替えます。

Response Time (応答時間)

リクエストをダウンロードを開始した時間順に並び替えます。

End Time (終了時間)

リクエストが終了した時間順に並び替えます。

Total Duration (合計期間)

リクエストとレスポンスががもっとも短い時間順に並び替えます。

Latency (遅延)

レスポンスの遅延がもっとも短い順に並び替えます。

リクエストの分析

リクエストテーブルには、デフォルトで以下の列が表示されます。

Name

リソースのファイル名、またはリソースの識別子。

Status

HTTPステータスコード。

Type

要求されたリソースの MIME タイプ。

Initiator

リソースを呼び出す起点。また、プロセスやアクションによって、以下のタイプがあります。

• Parser: Chrome の HTML パーサー
• Redirect: HTTP リダイレクト
• Script: JavaScript 関数
• Other: 上記以外の他のプロセス、またはアクション。

Size

レスポンスヘッダーと本文の合計サイズ。

Time

リクエストの開始からレスポンスの最終バイトの受信までの合計時間。

Waterfall

リクエスト毎のアクティビティの視覚的な内訳。

リクエストテーブルの列を追加、または削除するにはヘッダーを右クリックし、項目をクリックします。現在表示されている項目には、チェックマークが付いています。

リクエストテーブルにカスタム列を追加するには、リクエストテーブルのヘッダーを右クリックし [Response Headers] から [Manage Header Columns...] を選択します。

WebSocket 接続のフレームを表示するには、リクエストテーブルの中にある WebSocket 接続の URL をクリックし、[Messages] タブをクリックします。このテーブルには最後の 100 フレームが表示され、以下の列を含みます。

Data

メッセージのペイロード (パケット通信においてパケットに含まれるヘッダやトレーラなどの付加的情報を除いたデータ本体)。メッセージがプレーンテキストの場合、テキストが表示されます。バイナリコードの場合、この列にはオペコードの名前とコードが表示されます。

Length

メッセージペイロードの長さ（バイト単位）。

Time

メッセージが受信または送信された時刻。

レスポンス本文のプレビューを表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Preview] タブをクリックします。[Preview] タブは、主に画像を確認する場合に役立ちます。

レスポンス本文を表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Response] タブをクリックします。

HTTP ヘッダーを表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Headers] タブをクリックします。

クエリのパラメータ文字列を表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Headers] タブをクリックします。その中にある Query String Parameters のセクションを参照してください。

Query String Parameters のセクションには、view source と view URL encoded / decoded ボタンがあります。それらのボタンによってパラメータソースを参照したり、URL をエンコード・デコードすることができます。

Cookie を表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Cookies] タブをクリックします。

リクエストのタイミングの内訳を表示するには、リクエストテーブルの中にあるリクエストの URL をクリックし、[Timing] タブをクリックします。

Queueing

ブラウザは以下の場合にリクエストをキューに含めます。

• リクエストは重要なリソース（スクリプトやスタイルなど）よりも優先度が低いと見なされ、レンダリングエンジンによって処理を延期される場合。
• リクエスト先のオリジンに対して利用可能な TCP ソケットがなく、ソケットの解放を待機する場合。HTTP/1.0、または HTTP/1.1 では 1 オリジンあたり 6 つの TCP 接続までしか許可されません。
• ブラウザがディスクキャッシュのエントリ作成に時間がかかった場合

Stalled

リクエストを送信できるようになるまでの待機時間を表します。Queueing で述べた理由で待機している場合もあります。また、この時間にはプロキシネゴシエーションにかかった時間も含まれます。

DNS Lookup

DNS 参照の実行にかかった時間を表します。DNS 参照とは、ドメインを IP に変換するために DNS を参照した時間です。ページ上の新しいドメインはすべて、DNS 参照を行うために完全なラウンドトリップを必要とします。

Initial connection

TCP のハンドシェイクや SSL のネゴシエーションなど、接続の確立にかかった時間を表します。TCP コネクションを作成するためにかかった時間であるため、ここには SSL の時間も含まれます。

SSL

SSL ハンドシェイクの完了にかかった時間を表します。Initial connection から SSL の時間を差し引いた時間が、単純に TCP コネクションを作成するためにかかった時間になります。

Request sent

ネットワークリクエストの発行にかかった時間を表します。TCP コネクションを作成したあとに、実際にリクエストを発行する時間です。ネットワーク上の送信時間は含まれないので、非常に短い時間になります。

Waiting (TTFB)

初期レスポンスの待機にかかった時間を表します。最初のバイトを受け取るまでの時間 (TTFB: Time To First Byte) とも呼ばれます。この時間には、サーバーがレスポンスの配信を待機していた時間とサーバーとのラウンドトリップの遅延が含まれます。TTFB が長いとサーバー側で遅延が発生している可能性があります。

Content Download

レスポンスデータの受信にかかった時間を表します。画像のような容量が大きいデータをリクエストすると、ダウンロードに時間がかかる場合があります。

イニシエーターと依存関係を表示するには、リクエストテーブルで対象のリソースにカーソルが当たっている状態で Shift キーを押します。イニシエーターは緑色、依存関係のリソースは赤色で表示されます。

DevToolsは、ネットワークパネルの複数の場所で DOMContentLoaded イベントと load イベントのタイミングを表示します。DOMContentLoaded イベントは青色、load イベントは赤色で表示されます。

リクエストの総数は、Network パネルの下部にある概要に表示されます。ただし、この数値は DevTools が開かれてからログに記録されたリクエストのみを追跡します。DevTools が開かれる前に他のリクエストが発生した場合、それらのリクエストはカウントされません。

リクエストのダウンロードサイズの合計は、Network パネルの下部にある概要に表示されます。ただし、この数値は DevTools が開かれてからログに記録されたリクエストのみを追跡します。DevTools が開かれる前に他のリクエストが発生した場合、それらのリクエストはカウントされません。

また、概要欄には transferred と resources の ２種類のサイズが記載されています。transferred は圧縮されたサイズで、resources は非圧縮のサイズです。ダウンロードされるリソースは、多くの場合圧縮されて転送されます。

各リソースの圧縮されたサイズと非圧縮のサイズを表示するには、Use large request rows のチェックボックスをオンにすると、Size 列に圧縮されたサイズと非圧縮のサイズが表示されます。例えば、下記の例では document が圧縮されて 15.1 KB で転送され、展開後は 63.5 KB になっていることがわかります。

リクエストデータのファイル出力

すべてのネットワークリクエストを HAR ファイルに保存するには、リクエストテーブルを右クリックし、Save all as HAR with Content を選択します。リクエストをフィルタリングしたり、任意のリクエストだけを保存することはできません。また、取得した HAR ファイルは、分析のために DevTools にドラッグしてインポートすることもできます。

リクエストはクリップボードにコピーすることもできます。任意のリクエスト上で右クリックし、Copy からいずれかの項目を選択します。

概要ペイン

概要ペインは３つのグラフから構成されます。

FPS

１秒あたりのフレーム数を表します。緑色の棒グラフが高いほど FPS も高くなります。FPS グラフ上部の赤色のブロックは時間がかかっているフレームを示し、問題を含んでいる可能性があります。問題の詳細は、以下のレンダリングパフォーマンスの記事を参照してください。

レンダリングパフォーマンス | Web | Google Developers

CPU

CPU リソースの消費量を表します。この面グラフは CPU リソースを使用しているイベントの種類を示します。

また、CPU 速度は遅い CPU の状態をシミュレーションできます。スロットリングのメニューから CPU の速度を選択します。メニューには、4x slowdown、6x slowdown があります。

NET

色分けされた棒グラフがリソースを表します。棒グラフが長いほどリソースの取得に時間がかかっています。棒グラフの色が薄い部分は、待ち時間 (リソースがリクエストされてから最初のバイトのダウンロードが終わるまでの時間) を表します。色の濃い部分は、転送時間 (最初のバイトのダウンロードから最後のバイトのダウンロードが終わるまでの時間) を表します。

• 青色 (Loading): HTTP リクエストや HTML のパース処理
• 黄色 (Scripting): JavaScript で行われた処理
• 紫色 (Rendering): スタイルの評価やレイアウト算出
• 緑色 (Painting): ペイント処理や画像のラスタライズ
• 灰色 (Other): その他

また、ネットワーク速度は遅いネットワークや、オフラインの状態をシミュレーションできます。スロットリングのメニューからプロファイルを選択します。メニューには、Fast 3G、Slow 3G、Offline があります。

スクリーンショット (オプション)

ページの表示域のスクリーンショットを並べて表示します。スクリーンショットを表示するには、コントロールペインにある Screenshots のチェックボックスをオンにします。

フレームチャートペイン

フレームチャートペインは、イベントやアクティビティの詳細と内訳が表示されます。フローチャートでイベントを選択すると、詳細ペインにそのイベントに関する追加情報が表示されます。以下の例では、Parse HTML イベントを詳細ペインに表示しています。

イベントやアクティビティを何も選択していない場合は、概要ペインで選択された範囲内でのイベント時間が詳細ペインに表示されます。Loading、Scripting、Rendering、Painting、System、Idle、Total の時間が表示されます。これらの時間からボトルネックとなっているアクティビティをおおまか探すことができます。パフォーマンスの分析に関する詳細は、以下の記事を参照してください。

オプションとして高度なペイントの計測を有効にすることもできます。高度なペイントの計測を有効にする場合は、設定から Enable advanced paint instrumentation (slow) のチェックボックスをオンにします。

また、デフォルトの設定では JavaScript のスタックを取得する設定が有効になっているため、呼び出された JavaScript 関数がフレームチャートに表示されます。JavaScript のスタックを取得する設定は、設定から Disable JavaScript Samples のチェックボックスをオンにしてください。

JavaScript のスタック情報からボトルネックとなっている箇所を発見することができます。JavaScript 実行の高速化については、以下の記事を参照してください。

フローチャート上では、検索ツールバーを表示することもできます。フローチャートをアクティブにした状態で Cmd + F (Mac)、または Ctrl + F (Windows/Linux) を押すと、検索ツールバーが開きます。検索ツールバーでは、イベント種類の名前など (例えば HTML など) でフローチャートを検索することができます。また、オプションとして大文字小文字を区別したり、正規表現を使用できます。

フローチャート上で右クリックをすると、プロファイルの保存と読み込みが行えます。プロファイルの保存形式は JSON 形式となります。

詳細ペイン

詳細ペインは、概要ペインの範囲内にあるアクティビティの時間や、イベントログを表示します。フローチャート上のアクティビティが選択されていない場合は、概要ペインの範囲内にあるすべての要素が対象になります。フローチャート上の任意の要素が選択されている場合は、その要素が対象になります。

詳細ペインは、以下のタブで構成されています。

• Summary: 任意の期間、または項目の概要を表示します。
• Bottom-Up: どのアクティビティがボトルネックとなっているかを表示します。
• Call Tree: どのルートアクティビティがボトルネックとなっているかを表示します。
• Event Log: パフォーマンスを記録中に発生した順のアクティビティを表示します。

Summary タブでは、任意の期間、または項目の概要を表示します。表示される時間は Loading、Scripting、Rendering、Painting、System、Idle、Total の時間です。これらの時間からボトルネックとなっているアクティビティをおおまかに探すことができます。パフォーマンスの分析に関する詳細は、以下の記事を参照してください。

Bottom-Up タブでは、どのアクティビティがボトルネックとなっているかを表示します。アクティビティは階層構造となっており、展開することで詳細な情報を表示できます。

Self Time は、そのアクティビティにかかった時間を表しています。Total Time は、そのアクティビティ全体（子要素も含む）にかかった時間を表しています。

アクティビティは、グルーピングして表示することもできます。デフォルトでは No Grouping となっていますが、Activity、Category、Domain、Frame、Product、Subdomain、URL の種類でグルーピングできます。また、任意の文字列でフィルタリングする機能もあります。

Call Tree タブでは、どのルートアクティビティがボトルネックとなっているかを表示します。ルートアクティビティとは、ブラウザに何らかの作業を行わせるアクティビティです。例えば、ページをクリックするとブラウザは Event アクティビティをルートアクティビティとして起動します。

Self Time は、そのアクティビティにかかった時間を表しています。Total Time は、そのアクティビティ全体（子要素も含む）にかかった時間を表しています。

Call Tree タブでは、フローチャート上で選択されたアクティビティのツリーのみが表示されます。フローチャート上で何も選択されていない場合は、概要ペインの範囲内にあるすべての要素が対象になります。

アクティビティは、グルーピングして表示することもできます。デフォルトでは No Grouping となっていますが、Activity、Category、Domain、Frame、Product、Subdomain、URL の種類でグルーピングできます。また、任意の文字列でフィルタリングする機能もあります。

Event Log タブでは、パフォーマンスを記録中に発生した順のアクティビティを表示します。フローチャート上で選択された場合は、対象のアクティビティのイベントログのみが表示されます。フローチャート上で何も選択されていない場合は、概要ペインの範囲内にあるすべてのイベントが対象になります。

Start Time は、そのアクティビティの記録の開始する開始時刻を表します。例えば Start Time が 100 ms は、記録が開始されてから 100 ms 後にアクティビティが開始されたことを表します。Self Time は、そのアクティビティにかかった時間を表しています。Total Time は、そのアクティビティ全体（子要素も含む）にかかった時間を表しています。

アクティビティは、グルーピングして表示することもできます。デフォルトでは All となっていますが、1 ms 以上、 15 ms 以上の種類でグルーピングできます。また、任意の文字列やアクティビティでフィルタリングする機能もあります。

Heap snapshot

Heap snapshot （動的に確保可能なメモリ領域のスナップショット）では、ページの JavaScript オブジェクトと、関連 DOM ノード別のメモリ分布が示されます。スナップショットのタイトルの下に数値は、JavaScript オブジェクトの合計サイズを表しています。例えば、以下の例では 3.9 MB が JavaScript オブジェクトの合計サイズになります。

スナップショットは、プルダウンメニューによって以下の表示に切り替えることができます。

Summary (デフォルト)

オブジェクトをコンストラクタ名別のグループにして表示します。このビューでは、コンストラクタ名別にグループ化された型に基づいてオブジェクト（およびそのメモリ使用量）を追跡します。これは特に、DOM ツリーのメモリリークの検出に役立ちます。

Containment

ヒープ領域のコンテンツを調査します。オブジェクトの構造に適したビューが提供されるため、グローバルの名前空間で参照されるオブジェクトを分析するのに役立ちます。このビューでは、クロージャを分析して下位レベルのオブジェクトまで踏み込んで調査できます。

Statistics

ヒープ領域の統計情報を円グラフで提供します。この統計情報では、Code、Strings、JS Arrays、Typed Arrays、System Objects、Total などの割合を参照できます。

Allocation instrumentation timeline

Allocation instrumentation timeline も、JavaScript ヒープのメモリリークを追跡できるツールです。タイムラインに青い縦線が表示される場合は注意が必要です。

青い縦線は新しくメモリが割り当てられたことを表します。このような新しいメモリの割り当ては、メモリリークの候補になります。縦線を選択すると、指定した期間に割り当てられたオブジェクトのみが表示されます。オブジェクトを展開して値をクリックすると、詳細が [Object] ペインに表示されます。

Allocation sampling

Allocation sampling は、サンプリングを使用してメモリの推移を計測します。サンプリングを行うには Start ボタンを押してから調査したいページでアクションを実行し、アクションがすべて完了したら Stop ボタンを押します。

サンプリングが完了すると、関数ごとにメモリ割り当ての内訳が表示されます。このビューには、もっともメモリの割り当てが多い関数が一番上に表示されます。

Application

Application のセクションではページの App Manifest（manifest.json の情報）の表示、Service Worker の管理、サイトデータの削除などを行うことができます。

Manifest では、App Manifest（manifest.json の情報）の表示します。manifest.json のリンクをクリックすると、実際の定義情報にジャンプすることができます。Manifest についての詳細は、PWA (Progressive Web Apps) とはの記事を参照してください。

Service Workers では、PWA の中枢的な機能である Service Worker の管理を行うことができます。Service Worker のデバッグについては、以下の記事を参照してください。

Clear storage では、ストレージがどれだけ使用されているかの割合の参照、および Service Worker、ストレージ、データベース、キャッシュのクリアを行うことができます。Clear storage では、それぞれのセクションのチェックボックスによって、クリアする対象のデータを選択することができます。

Storage

Key-Value Pair (KVP) の格納にローカルストレージを使用している場合は、これらの KVP を Local Storage から参照、変更、削除ができます。このサイトではローカルストレージを使用していないため、以下の画像には Key と Value のペアが表示されていません。ローカルストレージに Key と Value を格納する方法については、以下の記事を参照してください。

Key-Value Pair (KVP) の格納にセッションストレージを使用している場合は、これらの KVP を Session Storage から参照、変更、削除ができます。このサイトではセッションストレージを使用していないため、以下の画像には Key と Value のペアが表示されていません。セッションストレージに Key と Value を格納する方法については、以下の記事を参照してください。

IndexedDB は、IndexedDB データを参照、変更、削除するために使用します。IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存するクライアントサイドのローレベル API です。このサイトでは IndexedDB を使用していないため、以下の画像には何も表示されていません。IndexedDB の詳細については、以下の記事を参照してください。

IndexedDB が使われている場合、データベースが階層構造になって表示されます。複数のデータベースがアクティブの場合は、複数のエントリが表示されます。データベースの名前をクリックすると、そのデータベースのセキュリティオリジン、名前、バージョンが表示されます。データベースを展開すると、その Key-Value Pair (KVP) が表示されます。

KVP のページ間を移動するには、Start from key テキスト項目の横にある矢印ボタンを使用します。値を編集するには、その値を展開してダブルクリックします。値を追加、変更、または削除する場合、それらの変更がリアルタイムではアップデートされないため、更新してデータベースをアップデートする必要があります。

データベースからすべてのデータを削除するには、オブジェクトストアのクリアボタンをクリックします。これは、Service Worker の登録を解除して Clear storage から 1 回のクリックで他のストレージとキャッシュを削除しても実現できます。

Web SQL は、Web SQL データベースを参照、変更するために使用します。Web SQL とは、データベースにデータを格納するための API で、SQL の一部を使用してデータベースに照会できる仕組みです。このサイトでは Web SQL を使用していないため、以下の画像には何も表示されていません。Web SQL の詳細については、以下の記事を参照してください。

Web SQL が使われている場合、データベースが階層構造になって表示されます。複数のデータベースがアクティブの場合は、複数のエントリが表示されます。データベース名をクリックすると、そのデータベースのコンソールが開きます。

データベースのテーブルをクリックすると、そのテーブルのデータが表示されます。データベースのコンソールからテーブルの値が変更できますが、それらの変更がリアルタイムではアップデートされないため、更新してデータベースをアップデートする必要があります。

Cookies は、そのページで使われている Cookie を参照、追加、変更、削除するために使用します。HTTP Cookie は、サーバがユーザのブラウザに送信する小さなデータであり、ブラウザに保存されて次のリクエストと共に同じサーバへ返送されます。以下の画像では、Google Analytics の Cookie が表示されています。Cookie の詳細については、以下の記事を参照してください。

Cookie が使われている場合、対象の URL が表示されます。その URL を選択すると、Cookie のディレクティブと値が一覧形式で表示されます。Cookie のディレクティブは値をダブルクリックすることで変更できます。

Cache

Cache Storage では、使用可能なキャッシュを表示します。Cache Storage をクリックすると、キャッシュの内容が表示されます。キャッシュのリソースをクリックすると、表の下のセクションに HTTP Header と Preview が表示されます。

リソースを更新するには、テーブルから対象のリソースを選択して更新ボタン、または右クリックのメニューから Refresh を押します。リソースを削除するには、テーブルから対象のリソースを選択して削除ボタン、または右クリックのメニューから Delete を押します。すべてのリソースを削除するには Cache Storage の URL を右クリックして Delete を押します。

Application Cache は、Application Cache API を使用して作成されたリソースやルールを調査するために使用します。表示されたテーブルの Type 列は、以下のいずれかの値になります。

Master

リソースの manifest 属性で、このキャッシュがそのリソースのマスターであること表します。

Explicit

このリソースは、マニフェストに明示的に含まれていることを表します。

Network

マニフェストで、このリソースをネットワークから取得する必要があることを表します。

Fallback

Resource 列の URL が、別の URL の代わりとして含まれていることを表します。

Background Services

Background Fetch は、後述する Background Sync の機能が有効な場合に、Service Worker の寿命をコントロールするための仕組みです。バックグラウンドのタスクに時間がかかりすぎる場合（例えば、遅いネットワーク回線でアプリをダウンロードするなど）、Fetch 中は Service Worker が生きている必要があります。しかし、長時間 Service Worker をアクティブな状態にしておくのは、プライバシーやセキュリティ、バッテリーの観点から望ましくありません。そのため、ユーザが時間がかかりすぎるためにページを閉じた場合でも、Background Fetch はタスクを一時停止し、後から再開できるようにします。

Background Fetch では、そのような API の挙動を記録することができます。Background Fetch の詳細は、以下の記事を参照してください。

Background Sync は、ユーザが Web サーバにデータを送信しようとしたけれど、（サーバが落ちているなどで）失敗したときの問題を解決する API です。そのような問題が発生した場合、一般的には時間をあけて再度リクエストを送ろうとします。しかし、Background Sync はブラウザがバックグラウンドでネットワークコネクションが戻ったことを検知すると、自動的にリクエストを送ります。

Background Sync では、そのような API の挙動を記録することができます。Background Sync の詳細については、以下の記事を参照してください。

Frames

Frames では、ページリソースを表示します。以下の画像では、Images、Manifest、Other、Scripts などのリソースを表示しています。リソースを選択すると、右側に表示されます。