Chrome DevTools の使い方

DevTools とは

DevTools (デベロッパーツール、開発者ツール) とは、Webブラウザに付属している開発ツールです。モダンブラウザには基本的に標準で付属していますが、ここでは Google の Chrome DevTools (Chrome 76) について取り上げます。

DevTools は、以下のいずれかの方法で呼び出せます。

  • Chrome メニューから [その他のツール] → [デベロッパー ツール]
  • ページを右クリックして [検証] を選択する
  • Ctrl + Shift + I キーを押す(Windows)、または Cmd + Opt + I キーを押す(Mac)
  • F12 キーを押す
Chrome DevTools の呼び出し
Chrome DevTools の呼び出し

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

Chrome DevTools
Chrome 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 は対象の要素をダブルクリックすることで編集できます。変更された箇所は、リアルタイムでページに反映されます。

HTML と 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 キーを押して変更を保存します。

Styles ペイン
Styles ペイン

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

Computed

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

Computed ペイン
Computed ペイン

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

Event Listeners

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

Event Listeners ペイン
Event Listeners ペイン

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

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

DOM Breakpoints

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

DOM Breakpoints ペイン
DOM Breakpoints ペイン

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

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

Properties

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

Properties ペイン
Properties ペイン

Accessibility

Accessibility ペインでは Accessibility TreeARIA AttributesComputed Properties の情報を参照することができます。

Accessibility ペイン
Accessibility ペイン

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] を選択する。
Console パネル
Console パネル

他のパネルに隣接するドロワーとして表示することもできます。ドロワーとして表示するためには、以下のいずれかの方法で表示します。

  • DevTools がアクティブな状態で Esc キーを押す。
  • [Customize and control DevTools] ボタンから [Show console] を選択する。
Console パネル
Console パネル

メッセージスタッキング

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

メッセージスタッキング
メッセージスタッキング

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

DevTools の Settings
DevTools の Settings
Show timestamps
Show timestamps

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

Show timestamps
Show timestamps

コンソールの履歴

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

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

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

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

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

実行コンテキストの選択

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

Execution Context Selector
Execution Context Selector

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

Execution Context Selector
Execution Context Selector

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

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

Execution Context Selector
Execution Context Selector
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 化されていても、エディタの下部にある {} アイコンをクリックすることで整形できます。

Sources パネル
Sources パネル

JavaScript のコードを一時停止するにはブレークポイントを使用します。もっとも有名なブレークポイントは、コード行のブレークポイントですが DevTools では、以下のブレークポイントの種類があります。

コード行
厳密なコード部分。
条件付きコード行
厳密なコード部分、ただし他の何らかの条件が真であるときに限る。
DOM
特定の DOM ノードまたはその子を変更または削除するコード。
XHR
指定する文字列パターンが XHR のリクエスト URL に含まれる場合。
イベントリスナー
click などのイベントが発生した後に実行されるコード。
例外
捕捉された例外または捕捉されていない例外をスローするコード行。
関数
特定の関数が呼び出されるあらゆる場合。

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

コード行ブレークポイントは、調査が必要なコード部分が厳密にわかっている場合に使用します。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] のいずれかを選択します。
DOM 変更ブレークポイント
DOM 変更ブレークポイント
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 に出現するすべての箇所で一時停止します。
XHR ブレークポイント
XHR ブレークポイント

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

イベントリスナーブレークポイントは、イベントが発生した後で実行されるイベントリスナーコードで一時停止する場合に使用します。特定のイベント(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
スコープ外呼び出しによる ReferenceError スロー

Network

Network パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。

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

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 を選択します。

Clear Browser Cache
Clear Browser Cache

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

Clear Browser Cookies
Clear Browser Cookies

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

スロットリングのメニュー
スロットリングのメニュー

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

ネットワークのカスタムプロファイル
ネットワークのカスタムプロファイル

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

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

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

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

domain
指定されたドメインのリソースを表示します。ワイルドカード文字 (*) を使用して、複数のドメインを含めることができます。DevTools は、検出されたすべてのドメインをオートコンプリートドロップダウンメニューに追加します。
ドメインのリソース
ドメインのリソース
has-response-header
指定された HTTP レスポンスヘッダーを含むリソースを表示します。DevTools は、検出されたすべてのレスポンスヘッダーをオートコンプリートドロップダウンに取り込みます。
HTTP レスポンスヘッダーを含むリソース
HTTP レスポンスヘッダーを含むリソース
is
キャッシュからのリクエスト (from-cache)、まだ終了していないリクエスト (running)、ServiceWorker からのリクエストを表示します。
キャッシュなどを含むリソース
キャッシュなどを含むリソース
larger-than
指定されたサイズ (バイト単位) よりも大きいリソースを表示します。単位も指定可能で、1000 バイトは 1k と書くこともできます。
指定されたサイズ (バイト単位) よりも大きいリソース
指定されたサイズ (バイト単位) よりも大きいリソース
method
指定された HTTP メソッドタイプで取得されたリソースを表示します。DevTools は、検出されたすべてのHTTPメソッドをドロップダウンに取り込みます。
HTTP メソッドタイプで取得されたリソース
HTTP メソッドタイプで取得されたリソース
mime-type
指定された MIME タイプのリソースを表示します。DevTools は、検出されたすべてのMIMEタイプをドロップダウンに追加します。
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 の domain 属性のヘッダーを持つリソース
set-cookie-name
指定された値と一致する Set-Cookie の name 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての name をオートコンプリートに取り込みます。
Set-Cookie の name 属性のヘッダーを持つリソース
Set-Cookie の name 属性のヘッダーを持つリソース
set-cookie-value
指定された値と一致する Set-Cookie の value 属性のヘッダーを持つリソースを表示します。DevTools は、検出されたすべての value をオートコンプリートに取り込みます。
Set-Cookie の value 属性のヘッダーを持つリソース
Set-Cookie の value 属性のヘッダーを持つリソース
status-code
HTTP ステータスコードが指定されたコードと一致するリソースのみを表示します。DevTools は、検出されたすべてのステータスコードをオートコンプリートドロップダウンメニューに取り込みます。
HTTP ステータスコードに一致するリソース
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: から始まるファイルとして表示されます。

Hide data URLs
Hide data URLs

リクエストの並び替え

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

リクエストを Time で並び替えた例
リクエストを Time で並び替えた例

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

Start Time (開始時間)
リクエストが開始された時間順に並び替えます。
Response Time (応答時間)
リクエストをダウンロードを開始した時間順に並び替えます。
End Time (終了時間)
リクエストが終了した時間順に並び替えます。
Total Duration (合計期間)
リクエストとレスポンスががもっとも短い時間順に並び替えます。
Latency (遅延)
レスポンスの遅延がもっとも短い順に並び替えます。
リクエストを Time で並び替えた例
リクエストを Time で並び替えた例

リクエストの分析

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

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
メッセージが受信または送信された時刻。
WebSocket 接続のフレームを分析する
WebSocket 接続のフレームを分析する

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

レスポンス本文のプレビューを表示する
レスポンス本文のプレビューを表示する

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

レスポンス本文を表示する
レスポンス本文を表示する

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

HTTP ヘッダーを表示する
HTTP ヘッダーを表示する

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

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

クエリのパラメータ文字列を表示する
クエリのパラメータ文字列を表示する

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

Cookie を表示する
Cookie を表示する

リクエストのタイミングの内訳を表示するには、リクエストテーブルの中にあるリクエストの 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 にドラッグしてインポートすることもできます。

すべてのネットワークリクエストを HAR ファイルに保存する
すべてのネットワークリクエストを HAR ファイルに保存する

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

リクエストをクリップボードにコピーする
リクエストをクリップボードにコピーする

Performance

Web ページのアクティビティを記録して分析するには、Performance パネルを使います。アクティビティを記録するには record ボタン (Ctrl + E)、または reload ボタン (Ctrl + Shift + E) を押します。その他にも、推奨される方法として以下があります。

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

Performance パネルは以下の4つのペインで構成されます。

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

概要ペイン

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

概要ペイン
概要ペイン
FPS
1秒あたりのフレーム数を表します。緑色の棒グラフが高いほど FPS も高くなります。FPS グラフ上部の赤色のブロックは時間がかかっているフレームを示し、問題を含んでいる可能性があります。問題の詳細は、以下のレンダリングパフォーマンスの記事を参照してください。
CPU
CPU リソースの消費量を表します。この面グラフは CPU リソースを使用しているイベントの種類を示します。

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

CPU の設定
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) のチェックボックスをオンにします。

Enable advanced paint instrumentation (slow)
Enable advanced paint instrumentation (slow)

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

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

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 の時間です。これらの時間からボトルネックとなっているアクティビティをおおまかに探すことができます。パフォーマンスの分析に関する詳細は、以下の記事を参照してください。

Summary タブ
Summary タブ

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

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

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

Bottom-Up タブ
Bottom-Up タブ

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

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

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

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

Call Tree タブ
Call Tree タブ

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

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

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

Event Log タブ
Event Log タブ

Memory

Memory パネルは、メモリリークの追跡などのために、[Performance] で提供される情報よりさらに多くの情報が必要な場合に使用します。Memory パネルでは、以下のプロファイリングタイプが選択できます。

  • Heap snapshot
  • Allocation instrumentation timeline
  • Allocation sampling

スナップショットを取得するには、上記のいずれかのプロファイルを選択して Take snapshot / Start ボタンをクリック、または Cmd + E (Mac)、Ctrl + E (Windows/Linux)を押します。スナップショットを削除するには、[Clear all profiles] アイコンをクリックして削除します。

Memory パネル
Memory パネル

Summary と Containment では、以下の列が用意されています。

Constructor
このコンストラクタを使用して作成されたすべてのオブジェクトを表します。
Distance
ノードからルートまでの最短距離が表示されます。
Shallow size
特定のコンストラクタによって作成されたオブジェクトの Shallow サイズの合計が表示されます。Shallow サイズとは、オブジェクト自体が保持するメモリサイズです。
Retained size
オブジェクトの Retained サイズが表示されます。Retained サイズとは、あるオブジェクトが削除された(そのオブジェクトに依存するオブジェクトも含む)後、解放される可能性のあるメモリサイズです。

Heap snapshot

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

Heap snapshot
Heap snapshot

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

Summary (デフォルト)
オブジェクトをコンストラクタ名別のグループにして表示します。このビューでは、コンストラクタ名別にグループ化された型に基づいてオブジェクト(およびそのメモリ使用量)を追跡します。これは特に、DOM ツリーのメモリリークの検出に役立ちます。
Containment
ヒープ領域のコンテンツを調査します。オブジェクトの構造に適したビューが提供されるため、グローバルの名前空間で参照されるオブジェクトを分析するのに役立ちます。このビューでは、クロージャを分析して下位レベルのオブジェクトまで踏み込んで調査できます。
Statistics
ヒープ領域の統計情報を円グラフで提供します。この統計情報では、Code、Strings、JS Arrays、Typed Arrays、System Objects、Total などの割合を参照できます。

Allocation instrumentation timeline

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

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

Allocation instrumentation timeline
Allocation instrumentation timeline

Allocation sampling

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

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

Allocation sampling
Allocation sampling

Application

Application パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。Application パネルは、以下のセクションに分かれています。

  • Application
  • Storage
  • Cache
  • Background Services
  • Frames
Application パネル
Application パネル

Application

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

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

App Manifest
App Manifest
manifest.json
manifest.json

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

Service Worker
Service Worker

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

Clear storage
Clear storage

Storage

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

Local Storage
Local Storage

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

Session Storage
Session Storage

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

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

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

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

IndexedDB
IndexedDB

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

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

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

Web SQL
Web SQL

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

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

Cookies
Cookies

Cache

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

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

Cache Storage
Cache Storage

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

Master
リソースの manifest 属性で、このキャッシュがそのリソースのマスターであること表します。
Explicit
このリソースは、マニフェストに明示的に含まれていることを表します。
Network
マニフェストで、このリソースをネットワークから取得する必要があることを表します。
Fallback
Resource 列の URL が、別の URL の代わりとして含まれていることを表します。
Application Cache
Application Cache

Background Services

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

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

Background Fetch
Background Fetch

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

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

Background Sync
Background Sync

Frames

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

Frames
Frames

Security

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

Security パネル
Security パネル

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

証明書情報
証明書情報

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

安全ではないページ (HTTP)
安全ではないページ (HTTP)

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

mixed content
mixed content

Audits

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

Audits パネル
Audits パネル

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

Lighthouse の監査結果
Lighthouse の監査結果
Category:
パフォーマンス
公開日:
更新日:
Pageviews:
555
Shares:
48
Tag:
DevTools
HTML
CSS
JavaScript
Google Chrome