Chrome DevTools の使い方
DevTools とは
DevTools (デベロッパーツール、開発者ツール) とは、Webブラウザに付属している開発ツールです。モダンブラウザには基本的に標準で付属していますが、ここでは Google の Chrome DevTools (Chrome 76) について取り上げます。
DevTools は、以下のいずれかの方法で呼び出せます。
- Chrome メニューから [その他のツール] → [デベロッパー ツール]
- ページを右クリックして [検証] を選択する
Ctrl + Shift + I
キーを押す(Windows)、またはCmd + Opt + I
キーを押す(Mac)F12
キーを押す

呼び出された DevTools は、以下のように表示されます。

DevTools には、以下のパネルがあります。
- Elements
- [Elements] パネルでは、DOM と CSS を自由に操作してサイトのレイアウトやデザインを反復処理できます。
- Console
- [Console] パネルでは、開発中に診断情報を記録したり、その情報をシェルとして使用してページ上の JavaScript を操作したりできます。
- Sources
- [Sources] パネルでは、ブレークポイントを使用して JavaScript をデバッグしたり、ワークスペース経由でローカル ファイルを接続して DevTools ライブエディタを使用したりできます。
- Network
- [Network] パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。
- Performance
- [Performance] では、サイトのライフサイクル中に発生するさまざまなイベントの記録や調査によってページの実行時パフォーマンスを向上できます。
- Memory
- [Memory] パネルは、メモリリークの追跡などのために、[Performance] で提供される情報よりさらに多くの情報が必要な場合に使用します。
- Application
- [Application] パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。
- Security
- [Security] パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。
- Audits
- [Audits] パネルでは、Lighthouse によるパフォーマンスの測定、およびボトルネックを発見することができます。
Elements
Elements パネルでは、ページの HTML と CSS の調査や編集が可能です。以下のように Elements パネルではウィンドウが2分割されており、左側に HTML (DOM のツリービュー)、右側に CSS が表示されます。HTML と CSS は対象の要素をダブルクリックすることで編集できます。変更された箇所は、リアルタイムでページに反映されます。

また、CSS 側には以下のペインがあります。
- Styles
- [Styles] ペインでは、スタイルのプロパティ名と値を編集できます。ただし、グレー表示されているスタイルは編集することができません。
- Computed
- [Computed] ペインでは、選択された要素のボックスモデルを表示して編集します。
- Event Listeners
- [Event Listeners] ペインでは、イベントリスナーの一覧を取得できます。
- DOM Breakpoints
- [DOM Breakpoints] ペインでは、任意の要素について「要素のサブツリーの変更」、「属性の変更」、「要素の削除」が発生したタイミングでブレークポイントを設定できます。
- Properties
- [Properties] ペインでは、各要素のプロパティ値の情報を一覧で取得できます。
- Accessibility
- [Accessibility] ペインでは、「Accessibility Tree」、「ARIA Attributes」、「Computed Properties」の情報を参照することができます。
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
では選択した要素の計算されたプロパティ値が表示されます。プロパティが重複している場合、優先度によって最終的に適用されるプロパティが決まります。逆に適用されなかったプロパティは、打ち消し線が引かれます。
Console
Console パネルでは、開発中に診断情報を記録したり、その情報をシェルとして使用してページ上の JavaScript を操作したりできます。パネルとして表示するためには、以下のいずれかの方法で表示します。
Ctrl + Shift + J
(Windows/Linux)、またはCmd + Opt + J
(Mac) を押す。- DevTools から [Console] を選択する。

他のパネルに隣接するドロワーとして表示することもできます。ドロワーとして表示するためには、以下のいずれかの方法で表示します。
- DevTools がアクティブな状態で
Esc
キーを押す。 [Customize and control DevTools]
ボタンから[Show console]
を選択する。

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

メッセージが記録されるたびに1行ずつエントリを表示するには、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
とは、コンソールに表示するフォーマット形式をオリジナルな形式で表示できる機能です。
Sources
[Sources] パネルでは、ブレークポイントを使用して JavaScript をデバッグしたり、ワークスペース経由でローカルファイルを接続して DevTools ライブエディタを使用できます。また、ソースコードは minify 化されていても、エディタの下部にある {}
アイコンをクリックすることで整形できます。

JavaScript のコードを一時停止するにはブレークポイントを使用します。もっとも有名なブレークポイントは、コード行のブレークポイントですが DevTools では、以下のブレークポイントの種類があります。
- コード行
- 厳密なコード部分。
- 条件付きコード行
- 厳密なコード部分、ただし他の何らかの条件が真であるときに限る。
- DOM
- 特定の DOM ノードまたはその子を変更または削除するコード。
- XHR
- 指定する文字列パターンが XHR のリクエスト URL に含まれる場合。
- イベントリスナー
click
などのイベントが発生した後に実行されるコード。- 例外
- 捕捉された例外または捕捉されていない例外をスローするコード行。
- 関数
- 特定の関数が呼び出されるあらゆる場合。
コード行ブレークポイント
コード行ブレークポイントは、調査が必要なコード部分が厳密にわかっている場合に使用します。DevTools はこのコード行が実行される前に必ず一時停止します。DevTools でコード行ブレークポイントを設定する手順は、次のとおりです。
- [page] タブをクリックします。
- ブレークポイントを配置する対象のコード行を含むファイルを開きます。
- 対象のコード行に移動します。
- コード行左側の行番号列をクリックします。
- 番号列の上に青いアイコンが表示されます。

コード行ブレークポイントの配置は、GUI で設定する以外にコード内に設定することもできます。コード内にコード行ブレークポイントの配置するには、debugger
を呼び出します。
console.log('a');
console.log('b');
debugger;
console.log('c');
条件付きコード行ブレークポイント
条件付きコード行ブレークポイントは、調査が必要な厳密なコード部分はわかっているが、他の一定の条件が真である場合にのみ一時停止するという場合に使用します。条件付きコード行ブレークポイントを設定する手順は、次のとおりです。
- [page] タブをクリックします。
- ブレークポイントを配置する対象のコード行を含むファイルを開きます。
- 対象のコード行に移動します。
- コード行左側の行番号列を右クリックします。
- [Add conditional breakpoint] を選択します。
- ダイアログに一時停止する条件を入力します。
- 番号列の上にオレンジ色のアイコンが表示されます。

コード行ブレークポイントの管理
配置したコード行のブレークポイントは、[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 変更ブレークポイントを設定する手順は、次のとおりです。
- [Elements] パネルをクリックします。
- ブレークポイントを設定する要素に移動します。
- その要素を右クリックします。
- [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 ブレークポイントを設定する手順は、次のとおりです。
- [Sources] パネルをクリックします。
- [XHR Breakpoints] ペインを展開します。
- [Add breakpoint] をクリックします。
- 出現時に一時停止する文字列を入力します。DevTools は、この文字列が XHR のリクエスト URL に出現するすべての箇所で一時停止します。

イベントリスナーブレークポイント
イベントリスナーブレークポイントは、イベントが発生した後で実行されるイベントリスナーコードで一時停止する場合に使用します。特定のイベント(click
など)、またはイベントのカテゴリ(すべてのマウスイベントなど)を選択することができます。イベントリスナーブレークポイントを設定する手順は、次のとおりです。
- [Sources] パネルをクリックします。
- [Event Listener Breakpoints] ペインを展開します。
- 発生したら一時停止するイベントのカテゴリにチェックを入れる、またはカテゴリを展開して特定のイベントにチェックを入れます。

例外ブレークポイント
例外ブレークポイントは、捕捉された例外、または捕捉されていない例外をスローしているコード行で一時停止する場合に使用します。例外ブレークポイントを設定する手順は、次のとおりです。
- [Sources] パネルをクリックします。
- [Pause on exceptions] をクリックします。(有効になると青色に変わります)
- 捕捉されていないで例外に加えて捕捉された例外でも一時停止する場合は、[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
ReferenceError
スローNetwork
Network パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。
ネットワークリクエストの記録
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 レスポンスヘッダーを含むリソース is
- キャッシュからのリクエスト (
from-cache
)、まだ終了していないリクエスト (running
)、ServiceWorker からのリクエストを表示します。キャッシュなどを含むリソース larger-than
- 指定されたサイズ (バイト単位) よりも大きいリソースを表示します。単位も指定可能で、
1000
バイトは1k
と書くこともできます。指定されたサイズ (バイト単位) よりも大きいリソース method
- 指定された HTTP メソッドタイプで取得されたリソースを表示します。DevTools は、検出されたすべてのHTTPメソッドをドロップダウンに取り込みます。
HTTP メソッドタイプで取得されたリソース mime-type
- 指定された MIME タイプのリソースを表示します。DevTools は、検出されたすべてのMIMEタイプをドロップダウンに追加します。
MIME タイプのリソース 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 の domain 属性のヘッダーを持つリソース set-cookie-name
- 指定された値と一致する Set-Cookie の name 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての name をオートコンプリートに取り込みます。
Set-Cookie の name 属性のヘッダーを持つリソース set-cookie-value
- 指定された値と一致する Set-Cookie の value 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての value をオートコンプリートに取り込みます。
Set-Cookie の value 属性のヘッダーを持つリソース status-code
- HTTP ステータスコードが指定されたコードと一致するリソースのみを表示します。DevTools は、検出されたすべてのステータスコードをオートコンプリートドロップダウンメニューに取り込みます。
HTTP ステータスコードに一致するリソース
リクエストタイプ別にフィルタリングするには、ネットワークパネルで 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 の 2種類のサイズが記載されています。transferred は圧縮されたサイズで、resources は非圧縮のサイズです。ダウンロードされるリソースは、多くの場合圧縮されて転送されます。

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

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

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

Performance
Web ページのアクティビティを記録して分析するには、Performance パネルを使います。アクティビティを記録するには record ボタン (Ctrl + E)、または reload ボタン (Ctrl + Shift + E) を押します。その他にも、推奨される方法として以下があります。
- 記録はできるだけ短時間にする: 一般的には記録時間が短ければ短いほど分析は簡単になります。
- 不要なアクションは避ける: 記録や分析の対象とするアクション以外 (例えば、マウスのクリックやネットワークの読み込みなど) は避けるようにします。
- ブラウザのキャッシュを無効にする: ネットワーク操作を記録するときは [Settings] パネル、または Network cinditions ドロワーからブラウザのキャッシュを無効にすることが推奨されます。
- 拡張機能を無効にする: Chrome 拡張機能によって、アプリケーションのアクティビティの記録に無関係の操作が加わる可能性があります。Chrome ウィンドウをシークレットモードで開くか、新しい Chrome ユーザプロフィールを作成して、現在の環境に拡張機能が含まれないようにします。

Performance パネルは以下の4つのペインで構成されます。
- コントロール
- 記録の開始や停止、記録中に取得する情報の設定を行います。
- 概要
- ページのパフォーマンス概要を示します。
- フレームチャート
- CPU スタックトレースを表示します。また、フレームチャート上には1~3本の縦の点線が表示されることがあります。青色の線は
DOMContentLoaded
イベントを表します。緑色の線は最初のペイントまでの時間を表します。赤色の線はload
イベントを表します。 - 詳細
- イベントを選択すると、そのイベントに関する詳細情報がこのペインに表示されます。イベントを選択していないときは、選択した期間についての情報がこのペインに表示されます。

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

- FPS
- 1秒あたりのフレーム数を表します。緑色の棒グラフが高いほど FPS も高くなります。FPS グラフ上部の赤色のブロックは時間がかかっているフレームを示し、問題を含んでいる可能性があります。問題の詳細は、以下のレンダリングパフォーマンスの記事を参照してください。
- CPU
- CPU リソースの消費量を表します。この面グラフは CPU リソースを使用しているイベントの種類を示します。
また、CPU 速度は遅い CPU の状態をシミュレーションできます。スロットリングのメニューから CPU の速度を選択します。メニューには、4x slowdown、6x slowdown があります。
CPU の設定 - 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 以上の種類でグルーピングできます。また、任意の文字列やアクティビティでフィルタリングする機能もあります。

Memory
Memory パネルは、メモリリークの追跡などのために、[Performance] で提供される情報よりさらに多くの情報が必要な場合に使用します。Memory パネルでは、以下のプロファイリングタイプが選択できます。
- Heap snapshot
- Allocation instrumentation timeline
- Allocation sampling
スナップショットを取得するには、上記のいずれかのプロファイルを選択して Take snapshot / Start ボタンをクリック、または Cmd + E (Mac)、Ctrl + E (Windows/Linux)を押します。スナップショットを削除するには、[Clear all profiles] アイコンをクリックして削除します。

Summary と Containment では、以下の列が用意されています。
- Constructor
- このコンストラクタを使用して作成されたすべてのオブジェクトを表します。
- Distance
- ノードからルートまでの最短距離が表示されます。
- Shallow size
- 特定のコンストラクタによって作成されたオブジェクトの Shallow サイズの合計が表示されます。Shallow サイズとは、オブジェクト自体が保持するメモリサイズです。
- Retained size
- オブジェクトの Retained サイズが表示されます。Retained サイズとは、あるオブジェクトが削除された(そのオブジェクトに依存するオブジェクトも含む)後、解放される可能性のあるメモリサイズです。
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 パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。Application パネルは、以下のセクションに分かれています。
- Application
- Storage
- Cache
- Background Services
- Frames

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 などのリソースを表示しています。リソースを選択すると、右側に表示されます。

Security
Security パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。以下は、このページが安全である場合の例です。

左側のナビゲーションから、いずれかのエントリを選択すると証明書情報を参照できます。

ページが安全ではない場合、セキュリティの概要に This page is not secure. (このページは安全ではありません) と表示されます。安全なページにするには HTTP 接続を HTTPS 接続に変更、またはリダイレクトするように変更します。HTTPS 接続にするためには SSL の証明書が必要になりますが、以下の Let's Encrypt では、無料で SSL の証明書を発行しています。

最初の HTML が安全な HTTPS 接続で読み込まれ、その他のリソース(画像、動画、スタイルシート、スクリプトなど)が安全ではない HTTP 接続で読み込まれると、混合コンテンツが発生します。これが混合コンテンツと呼ばれるのは、同じページを表示するために HTTP と HTTPS 両方のコンテンツが読み込まれているためで、最初のリクエストは HTTPS で保護されています。最新のブラウザでは、この種のコンテンツに関する警告が表示され、このページに安全でないリソースが含まれていることがユーザに示されます。混同コンテンツの詳細については、以下の記事を参照してください。

Audits
Audits パネルでは、Lighthouse によるパフォーマンスの測定、およびボトルネックを発見することができます。Lighthouse は、Web ページの品質向上に役立つよう開発されたオープンソースのツールです。サイトのパフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA の対応状況についての確認できます。問題がある場合は、サイトの品質を向上させるための具体的な対策も提示します。

Lighthouse を使用するには、Device、Audits、Throttling からラジオボタン、またはチェックボックスを選択し、Run audits ボタンを押すと実行されます。監査結果に問題がある場合は、解決策の提示も行ってくれるので、レポート内容について確認してください。また、パフォーマンスに関する問題の補足は、PageSpeed Insights の使い方とパフォーマンス最適化のページでも述べています。
