とほほのDevTools入門

目次

概要

DevToolsとは

DevToolsを開くには

メインパネルとドロワー

メインパネル

ドロワー

パネルメニューとツールメニュー

パネルメニュー

パネルメニューには下記のものがあります。

ツールメニュー

ツールメニューには下記のものがあります。[セキュリティ] や [レコーダー] はデフォルトでメインパネルに配置されています。

キーボードショートカット

便利機能

DevTools では下記などの機能を利用することができます。下記以外にも様々な機能がサポートされています。

ドロワーを表示する
ドロワー は補助ウィンドウのようなものです。[ESC] を押してドロワーを開閉します。
コマンド実行する
[Shift]+[Ctrl]+[P] で コマンドメニュー を開き、コマンドを検索実行します。
日本語モードにする
[設定(Settings)] から [言語(Language)] で [Japanese - 日本語] を選択して DevTools を再起動します。
スマートフォンでの表示を確認する
[要素(Elements)] パネルの左上にある [デバイスのツールバーを切り替え(Toggle device toolbar)] アイコンをクリックすると、各社 のスマートフォンでどのように表示されるか確認することができます。
リクエスト・レスポンスの中身を確認する
[ネットワーク(Network)] でリクエスト・レスポンスをキャプチャして、リクエストヘッダ、レスポンスヘッダ、Cookie、ボディ情報を確認することができます。
JavaScript をデバッグする
[ソース(Sources)] パネルで JavaScript ソースの行番号の左をクリックしてブレークポイントを設定し、デバッガー でステップ実行(F9)、ステップイン(F11)、ステップアウト(Shift+F11)、ステップオーバー(F10) などのデバッグを行うことができます。
ローカルフォルダのソースファイルを直接書き換える
[ワークスペース(Workspace)] 機能を用いると、Webページをネットワーク経由で確認しながら、ローカルフォルダのソースファイルを直接書き換えることができます。
レスポンスの一部を書き換える
[オーバーライド(Overrides)] 機能を用いると、サーバからのレスポンスの一部を強制的に書き換えてテストすることができます。
性能ボトルネックを見つける
[パフォーマンス(Performance)] ペインでネットワーク、CPU、メモリなどの性能情報をグラフ化し、性能のボトルネックがどこにあるか解析することができます。
Webページを総合評価する
[ライトハウス(Lighthouse)] パネルで、ページのパフォーマンス、アクセシビリティ、ベストプラクティス、SEO の観点からWebページを総合評価し、改善の提案を受けることができます。
ページ全体や一部のスクリーンショットを撮る
[要素(Elements)] パネルから <html> 要素を右クリックして [ノードのスクリーンショットをキャプチャ(Capture node screenshot)] でスクロールを含めた画面全体のキャプチャを取得することができます。

上部アイコン

要素選択アイコン

デバイス切り替えアイコン

設定アイコン(⚙)

カスタマイズアイコン(︙)

固定サイド(Dock side)
DevTools をどこに表示するかを指定します。デフォルトは右側ですが、下側、左側、別ウィンドウに変更することができます。
コンソールドロワーを表示(Show console drawer)
[ドロワー] を開きます。
検索(Search)
[サーチ(Search)] ツールを開きます。
コマンドを実行(Run command)
[コマンドメニュー] を開きます。
ファイルを開く(Open file)
[ソース(Sources)] パネルでソースを開きます。
その他のツール(More tools)
各種 [ツール(Tools)] を開きます。
ショートカットを表示(Show Shortcuts)
[ショートカット(Shortcuts)] 設定画面を開きます。
ヘルプ
ドキュメント(Documentation)
DevTools に関するドキュメントを表示します。
リリースノート(Release notes)
DevTools の新機能に関するドキュメントを表示します。
DevToolsの問題を報告(Report a DevTools issue)
DevToolsの問題を報告するサイトを開きます。

要素(Elements)

HTML要素(DOM)やスタイル(CSS)を確認したり変更したりすることができます。

DOMツリー

属性を追加(Add attribute)
要素に属性を追加します。
HTMLとして編集(Edit as HTML)
HTMLとして編集します。
要素を複製(Duplicate element)
要素を複製します。
要素を削除(Delete element)
要素を削除します。
切り取り(Cut)
要素を切り取ります。Paste すると要素が移動します。
コピー(Copy)
要素を様々な形式でコピーします。
要素をコピー(Copy element)
要素をコピーします。
outerHTMLをコピー(Copy outerHTML)
outerHTML 部分をコピーします。
selectorをコピー(Copy selector)
この要素を示す CSS セレクタをコピーします。例：#x123
JSパスをコピー(Copy JS path)
JavaScript でこの要素を取得するコードをコピーします。例：document.querySelector("#x123")
スタイルをコピー(Copy styles)
この要素に適用されている CSS スタイルをコピーします。例：font-size: 26pt
XPathをコピー(Copy XPath)
この要素を示す XPath をコピーします。例：//*[@id="x123"]
完全なXPathをコピー(Copy full XPath)
この要素を示すフル XPath をコピーします。例：/html/body/div[2]
貼り付け(Paste)
Cut や Copy した要素を張り付けます。
要素を非表示(Hide element)
要素を非表示にします。非表示となった要素には先頭に薄い●が表示されます。再度実行すると再表示します。
状態を強制(Force state)
要素の状態を強制的に設定します。状態には :active, :hover, :focus, :visited, :focus-within, :focus-visible を指定できます。
ブレークポイントの位置(Break on)
JavaScript で要素や属性が変更されるタイミングにブレークポイントを設定して JavaScript をデバッグすることができます。
サブツリーの変更(subtree modifications)
選択したノードの子ノードが追加・削除された時、子ノードのコンテンツが変更された時にブレークします。子ノードの属性や選択ノードの変更ではブレークしません。
属性の変更(attribute modifications)
選択ノードの属性が追加・削除されたとき、属性値が変更されたときにブレークします。
ノード削除(node removal)
選択ノードが削除された時、ブレークします。
再帰的に展開(Expand recursively)
子要素をすべて開きます。
子を折り畳む(Collapse children)
子要素をすべて折りたたみます。
ノードのスクリーンショットをキャプチャ(Capture node screenshot)
ノードのスクリーンショットをキャプチャします。body ノードをキャプチャするとスクロールしないと見えない領域を含めてすべてキャプチャすることができます。キャプチャした結果はダウンロードフォルダに PNG 形式で保存されます。
表示される位置までスクロール(Scroll into view)
選択ノードが表示される位置まで画面をスクロールさせます。
フォーカス(Focus)
現在フォーカスが当たっているノードに移動します。
バッジの設定...(Badge setting...)
バッジの表示・非表示を設定します。バッジには grid, flex, scroll-snap, ad, container, slot, top-layer, reveal, subgrid, media の種類があります。
グローバル変数として保存(Store as global variable)
要素を Console で参照可能なグローバル変数に設定します。変数には temp1, temp2, temp3... などの名前がつけられます。Console で tempX を表示したり JavaScript で操作したりすることができます。

スタイル

スタイル(Styles)
選択した要素に関するスタイルを表示します。無視されているものは打消し線で表示されます。値をダブルクリックすることで値を変更したり、プロパティを追加することもできます。プロパティは ABC 順に表示されますが、グループ別に表示することもできます。最下部は要素のマージン、パディング、ボーダーの太さを表示します。
計算済み(Computed)
選択した要素に最終的に適用されれいるスタイルを表示します。最上部は要素のマージン、パディング、ボーダーの太さを表示します。複数のフォントが指定されている場合、最下部には最終的にどのフォントが採用されているかを表示します。
レイアウト(Layout)
要素の右側に表示される [grid] や [flex] バッジをクリックした際に表示されるグリッドやフレックスの詳細表示に関して、グリッド線、トラックサイズ、領域名などの表示・非表示設定を行います。
イベントリスナー(Event Listeners)
選択した要素に設定されているイベントリスナーの一覧を表示します。
DOMブレークポイント(DOM Breakpoints)
[ブレークポイントの位置(Break on)] で設定した、DOM に対するブレークポイントの一覧を表示します。
プロパティ(Properties)
選択した要素のプロパティリストを表示します。右クリックするとプロパティをコピーしたり 監視[Watch] に追加することができます。
アクセシビリティ(Accessibility)
アクセシビリティの充足状況を確認するために、アクセシビリティツリー、ARIA属性、計算済みプロパティを表示します。また、画面上の表示が HTML 上ではどのような順番で記述されているか(音声ブラウザなどでどの順番で読み上げられるか)を表示することができます。

コンソール(Console)

ツールバー

コンソールサイドバーを表示/非表示にします(Show/Hide console sidebar)アイコン
コンソールサイドバー を表示・非表示します。
コンソールを消去(Clear console)アイコン(∅)
コンソールの表示をクリアします。[Ctrl]+[L] も使用できます。
JavaScriptコンテキスト(JavaScript context)選択肢
JavaScript のコンテキスト(this)が何を示すかを選択します。
ライブ式を作成(Create live expression)アイコン(👁)
ライブ式を作成します。例えば変数名を指定するとコンソールの上部に変数名とその値が常に表示され、JavaScript の実行により変数がどのように変化していくかをリアルタイムに確認することができます。
フィルタ(Filter)
コンソールの表示を、入力した文字を含む行だけにフィルタリングします。/文字列/ とすることで正規表現も利用できます。
コンソールの設定(Console settings)アイコン(⚙)
コンソールに関する設定を行います。
ネットワークを非表示(Hide network)
404 Not Found などのネットワーク系のメッセージを表示しなくなります。
ログを保持(Preserve log)
ページを再描画した時でもコンソールの表示をクリアせず、保持したままにします。
選択したコンテンツのみ(Selected context only)
[JavaScriptコンテキスト]選択肢で選択したコンテキストから書き出されたメッセージのみに絞り込みます。
コンソールの類似するメッセージをまとめる(Group similar messages in console)
同じメッセージが表示された場合、メッセージを書き出すのではなく、前のメッセージの表示カウントをインクリメント表示します。
コンソールにCORSエラーを表示する(Show CORS errors in console)
コンソールに CORS エラーを表示します。
XMLHttpRequestsをログ(Log XMLHttpRequests)
コンソールに XMLHttpReuqests 関連の状況を示すログを表示します。
先行評価(Eager evaluation)
コンソールに変数名などを入力する際に入力が完了する前にマッチする変数があればその値を表示します。
履歴から予測入力(Autocomplete form history)
コンソールの入力履歴からのオートコンプリートを有効にします。
コード評価をユーザアクションとして扱わない(Treat code revolution as user action)
ユーザが何らかのページ操作を行った場合 navigator.userActivation.isActive↗ が false から true になります。コンソールから JavaScript 操作を行った場合もこのフラグが true になりますが、このチェックボックスをオフにしておくと、true にならなくなります。このフラグをみてフォームに入力中か否かを判断しているようなページのデバッグに有効です。

コンソールサイドバー

コンソールペイン

ソース(Sources)

ページ(Page)
ページ(*.html や *.js や *.css など)の一覧をツリー形式で表示します。
ワークスペース(Workspace)
ローカルホスト上のリソースを表示している際に、DevTools で編集した内容をローカルホストのファイルに同期して修正を保存することができます。(詳細↗)
オーバーライド(Overrides)
リクエストに対するレスポンスをオーバーライドして(上書きして)テストすることができます。(詳細↗)
コンテンツスクリプト(Content scripts)
インストールされているコンテンツスクリプトの一覧を表示します。(詳細↗)
スニペット(Snippets)
デバッグの際によく使う JavaScript をスニペットとして記録しておくことができます。例えば下記のスクリプトをスニペットとして登録しておけば、document.querySelectorAll(...) の代わりに $(...) を使用することができるようになります。 
function $(arg) { return document.querySelectorAll(arg); }
その他のオプション(More options)アイコン(︙)
フォルダ別に分類(Group by folder)
ページやコンテンツスクリプトをフォルダ毎にグルーピングする・しないを切り替えます。
作成元/実装元ごとにグループ化(Group by Authored/Deployed)
作成元/実装元ごとにグルーピングする・しないを切り替えます。現時点では実験的機能です。
無視リストのソースを非表示にする(Hide ignore-listed sources)
無視リストのソースの表示・非表示を切り替えます。現時点では実験的機能です。
ファイルを開く(Optn file)
ファイルを開きます。

エディタ(Editor)

ナビゲーターのサイドバーに表示(Reveal in navigator sidebar)
このファイルを [ナビゲーター] サイドバーに表示します。
新しいタブで開く(Open in new tab)
ソースをブラウザの新しいタブで開きます。
リンクのアドレスをコピー(Copy link address)
リンクアドレス(URL)をコピーします。
ファイル名をコピー(Copy file name)
ファイル名のみをコピーします。
ソースマップを追加...(Add source map...)
ファイルを ソースマップ に追加します。
コンテンツをオーバーライド(Override content)
ファイルをオーバーライドリストに登録します。
名前を付けて保存...(Save as...)
名前を付けてファイルを保存します。
無視リストにスクリプトを追加(Add script to ignore list)
ファイルを無視リストに追加します。

デバッガー(Debugger)

ツールバー(Toolbar)
スクリプトの実行を一時停止/再開(Pause/Resume script execution)(F8)
スクリプトの実行を一時停止、または、再開します。
次の関数呼び出しにステップオーバー(Step over next function call)(F10)
1処理分ステップ実行します。関数があっても関数の中には入りません。
次の関数呼び出しにステップイン(Step into next function call)(F11)
1処理分ステップ実行します。関数があれば関数の中に入ります。Step(F9) との違いがよく分かりません。
現在の関数からステップアウト(Step out of current function)(Shift+F11)
現在の関数を終了させ、呼び出し元関数に戻る箇所まで実行します。
ステップ(Step)(F9)
1処理分ステップ実行します。関数があれば関数の中に入ります。Step into next function call(F11) との違いがよく分かりません。
ブレークポイントを無効化(Deactivate breakpoints)(Ctrl+F8)
すべてのブレークポイントを一時的に無効化します。
スレッド(Threads)
スレッドの一覧を表示します。Web Workers を使用して複数スレッドを実行している場合のみ表示されます。
監視(Watch)
変数や式をウォッチします。+ アイコンで変数や式を追加します。Refresh アイコンで変数や式の値をリフレッシュします。
ブレークポイント(Breakpoints)
設定したブレークポイントの一覧を表示します。ブレークポイントはソースコードの行数の左側をクリックすることで追加できます。
範囲(Scope)
現在の関数スコープ、および、グローバルスコープの変数と値の一覧を表示します。
コールスタック(Call Stack)
現在の実行行のコールスタックを表示します。
XHR/フェッチブレークポイント(XHR/fetch Breakpoints)
URL を指定しておくと、その URL に XMLHttpRequest や fetch() が行われた時にブレークします。
DOMブレークポイント(DOM Breakpoints)
DOMに対するブレークポイントの一覧を表示します。DOM ブレークポイントは DOMツリー の要素右クリックから追加削除することができます。
グローバルリスナー(Global Listeners)
window などのグローバルオブジェクトに設定されたイベントリスナの一覧を表示します。
イベントリスナーブレークポイント(Event Listener Breakpoints)
対象を指定することなる、マウス(Mouse)のクリック(click)イベント発生時や、キーボード(Keyboard)のプレス(keypress)イベント発生時などにブレークすることができます。
CSP違反ブレークポイント(CSP Violation Breakpoints)
クロスサイトスクリプティング(XSS) といった Trusted Type の違反を検出した場合にブレークします。詳細は 信頼できるタイプのブレークポイント↗ を参照してください。

ソースマップ(Source map)

ネットワーク(Network)

ツールバー

ネットワークログの記録を停止(Stop recoding network log)
ネットワークのロギングを開始・停止します。
ネットワークログを消去(Clear network log)
表示されているネットワークログを消去します。
フィルタ(Filter)
フィルタバーの表示・非表示を切り替えます。
検索(Search)
ネットワークログの中から文字列を検索します。
ログを保持(Preserve log)
ページを再描画した時でもネットワークログの表示をクリアせず、保持したままにします。
キャッシュを無効化(Disable cache)
キャッシュを無効化します。
スロットリング(Throttling)
通信状態が良くない場合の表示を確認するために、ネットワーク速度を意図的に遅い状態をシミュレートします。ダウンロード速度、アップロード速度、レイテンシ、パケットロス率、パケットキューの長さを指定してカスタマイズした通信状態を作成することもできます。
その他のネットワーク状態(More network conditions...)
ドロワー に [ネットワーク状態(Network conditions)] を追加します。
HARファイルをインポート...(Import HAR file...)アイコン(⤒)
HAR(HTTP ARchive)形式のファイルをインポートします。
HARをエクスポート(Export HAR...)アイコン(⤓)
ネットワークログを HAR(HTTP ARchive)形式のファイルにエクスポートします。

フィルタバー

フィルタ(Filter)
指定した文字列を含むファイル名に絞り込みます。/(png|jpg)/ の様に正規表現で絞り込んだり、mime-type:image/png larger-than:1K の様に指定して 1KB 以上の image/png ファイルのみに絞り込むこともできます。(詳細↗)
反転(Invert)
フィルタの条件を反転させ、フィルタにマッチしないログを表示します。
データのURLを非表示(Hide data URLs)
HTML 文書に埋め込まれた データURL↗ を表示しないようにします。
拡張機能のURLを表示しない(Hide extension URLs)
拡張機能により取得されたURLを表示しません。
すべて, ...(All, ...)
表示するURLの種別を選択します。
ブロック中のレスポンスCookie(Blocked response cookies)
何らかの理由でブロックされたレスポンス Cookie を含むログのみを表示します。
ブロックされたリクエスト(Blocked requests)
ネットワークリクエストブロック でブロックされたログのみを表示します。
サードパーティのリクエスト(3rd-party requests)
サードパーティのリクエストログのみを表示します。

グラフペイン

テーブルペイン

[ソース]パネルで開く(Open in Sources panel)
ファイルを [ソース(Sources)] パネルで開きます。
新しいタブで開く(Open in new tab)
ファイルをブラウザの新しいタブで開きます。
ブラウザキャッシュを消去(Clear browser cache)
ブラウザのキャッシュを消去します。
ブラウザCookieを消去(Clear browser cookies)
ブラウザの Cookie を消去します。
コピー(Copy)
コピーバッファにコピーします。URL、コマンドプロンプトから実行する curl コマンド形式、bash から実行する curl コマンド形式、PowerShell から実行する Invoke-WebRequest コマンド形式、JavaScript の fetch() 形式、Node.js の fetch() 形式、リクエストヘッダー、、レスポンスヘッダー、レスポンス全体、HAR ファイル形式 など、様々な情報や形式でコピーすることができます。
ブロックリクエストのURL(Block request URL)
ネットワークリクエストブロック に URL を加えます。
リクエストドメインをブロック(Block request domain)
ネットワークリクエストブロック にドメインを加えます。
並べ替え(Sort By)
テーブルを指定した列で並べ替えます。
ヘッダーオプション(Header Options)
テーブルに表示する列を変更します。テーブルヘッダを右クリックした際のメニューと同様です。
ヘッダーをオーバーライド(Override headers)
レスポンスのヘッダ情報を一時的に変更したり追加したりします。例えば、正式サーバ側で CORS ヘッダの設定を行う前に、CORS ヘッダが返却された場合の動作をあらかじめシミュレートすることができます。追加したオーバーライド情報は [ソース(Sources)] パネルの [オーバーライド(Overrides)] に保存されます。
コンテンツをオーバーライド(Override content)
コンテンツ自体を一時的にオーバーライドします。fetch() で呼び出す API のレスポンスを一時的にオーバーライドしたものに置き換えることができます。追加したオーバーライド情報は [ソース(Sources)] パネルの [オーバーライド(Overrides)] に保存されます。
すべてのオーバーライドを表示(Show all overrides)
[ソース(Sources)] パネルの [オーバーライド(Overrides)] を開きます。
コンテンツを一緒にHARとしてすべて保存(Save all as HAR with content)
表示されているリクエスト・レスポンスをすべて、コンテンツも含めて HAR(HTTP ARchive)形式ファイルに保存します。
名前をつけて保存...(Save as...)
名前を付けてファイルに保存します。

詳細ペイン

ヘッダー(Headers)
要求・応答メッセージのヘッダ情報を表示します。
ペイロード(Payload)
要求メッセージのボディ情報を表示します。
プレビュー(Preview)
ファイルの中身をプレビューします。
レスポンス(Response)
応答メッセージのボディ情報を表示します。
イニシエータ(Initiator)
このファイルが、どのファイルから呼び出されたか、どのファイルを呼び出しているかを表示します。
タイミング(Timing)
送受信のキューイング時間、待ち時間、DNS解決時間、初期接続時間、要求送信時間、応答待ち時間、応答ダウンロード時間の詳細を表示します。
Cookies(Cookies)
要求・応答メッセージの Cookie 情報を表示します。

パフォーマンス(Performance)

ツールバー

記録/停止(Record/Stop)アイコン
パフォーマンスのプロファイリングを開始・停止します。
プロファイリングを開始してページを再読み込み(Start profiling and reload page)アイコン
プロファイリングを開始してページを再読み込みします。
消去(Clear)アイコン
プロファイリングの結果を消去します。
プロファイルを読み込みます...(Load profile...)アイコン(⤒)
プロファイリングの結果を保存した JSON ファイルから読み込みます。
プロファイルを保存します...(Save profile...)アイコン(⤓)
プロファイリングの結果を JOSN ファイルとして保存します。
最近のタイムラインセッションを表示(recording)
最近実行したプロファイリングの履歴を表示します。
スクリーンショット(Screenshots)
ロードしたページのスクリーンショットを撮ります。右端に CPU NET と表示されているグラフの上にマウスを乗せると、その時点のスクリーンショットを表示することができます。
メモリ(Memory)
メモリタイムラインの表示・非表示を切り替えます。(詳細↗)
ガベージコレクション(Collect garbage)アイコン
ページの記録中にガベージコレクションを強制します。
キャプチャの設定(Capture settings)アイコン(⚙)
JavaScriptのサンプルを無効にする(Disable JavaScript samples)
JavaScript のサンプリングを無効にして、モバイルデバイスに対する実行時のオーバーヘッドを削減します。
高度な描画パフォーマンスの測定(低速)を有効にする(Enable advanced paint instrumentation (slow))
高度な描画パフォーマンスの測定を有効にします。[レイヤ(Layer)] 機能が有効化されます。
CSSセレクタの統計情報を有効にする(遅い)(Enable CSS selector stats (slow)
CSSセレクタの統計測定を有効にします。
CPU(CPU)
低速度の CPU の場合の性能を確認するために、CPU スロットリングを設定し、遅い CPU 状態をシミュレートします。[4×減速(4x slowdown)] は CPU を 4分の1 の速度にシミュレートします。
ネットワーク(Network)
通信状態が良くない場合の性能を確認するために、ネットワーク速度を意図的に遅い状態をシミュレートします。ダウンロード速度、アップロード速度、レイテンシ、パケットロス率、パケットキューの長さを指定してカスタマイズした通信状態を作成することもできます。
ハードウェアの並行処理(Hardware concurrency)
論理プロセッサの数 navigator.hardwareConcurrency↗ を調整します。

タイムラインビュー

グラフセクション
フレームセクション

トラックペイン

ネットワーク(Network)トラック
ネットワークの詳細を表示します。グラフセクションで CPU グラフの下に青い横線がある箇所が、ネットワーク通信が発生している箇所です。HTML は青、CSS は紫、JavaScript は黄色、画像は緑で表示されます。左上の小さな青い四角は、濃い場合は優先度が高いこと、薄い場合は優先度が低いことを示します。(詳細↗)
フレーム(Frames)トラック
各フレームの状況を表示します。緑のフレームは期待通りに描画されたこと、黄色のフレームは少し問題があったこと、赤いフレームは適切な時間内にレンダリングできなかったことを示します。(詳細↗)
アニメーション(Animations)トラック
アニメーションに関する情報を表示します。アニメーションを含むページでもこのトラックが表示されないこともあるようです。
タイミング(Timings)トラック
画面描画のタイミングを表示します。(詳細↗)
操作(Interactions)トラック
マウス操作などの操作記録を表示します。記録の上にマウスを乗せると、入力遅延、処理期間、表示遅延などの詳細が表示されます。インタラクション(反応)が 200ms より遅くなると記録の右上に赤い三角が表示され、サマリタブにも警告メッセージが表示されます。(詳細↗)
レイアウトシフト(Layout Shift)
レイアウトシフトが発生している場合に表示されます。詳細は 「Web Vitals の概要: サイトの健全性を示す重要指標↗」を参照してください。
メイン(Main)トラック
クリックなどのイベント、JavaScript 処理、どんな関数がどのくらいの時間を要しているかなどの詳細を表示します。赤色は何らかの性能問題の可能性がある箇所を示しています。(詳細↗)
ラスター(Raster)トラック
画像などをラスタライズ(ベクタ情報をピクセル情報に変換)する状況を表示します。(詳細↗)
スレッドプール(Thread Pool)トラック
スレッドプールの状況を表示します。
メモリーインフラ(MemoryInfra)トラック
メモリに関する詳細を表示します。表示されないこともあるようです。
GPU(GPU)トラック
GPU の利用状況を表示します。(詳細↗)

詳細ペイン

概要(Summary)
トラックペイン で選択したオブジェクトの詳細情報を表示します。
ボトムアップ(Bottom-Up)
多くの時間を要しているアクティビティの一覧を表示します。[セルフ時間(Self Time)] 列にはそのアクティビティで要した時間を、[合計時間(Total Time)] 列にはそのアクティビティと子アクティビティの合計時間を、[アクティビティ(Activity)] 列にはアクティビティの内容を表示します。(詳細↗)
呼び出しツリー(Call Tree)
最も多くの時間を要しているアクティビティの親子関係をツリー形式で表示します。(詳細↗)
イベントログ(Event Log)
測定期間中に発生したイベント情報を表示します。(詳細↗)
レイヤ(Layer)
[フレーム(Frames)] トラックで指定した各フレームのレイヤ情報を表示します。[キャプチャの設定(Capture settings)] で [高度な描画パフォーマンスの測定(低速)を有効にする(Enable advanced paint instrumentation (slow)) をチェックしておき、[フレーム(Frames)] トラックでフレームをクリックした場合に表示されます。この機能は廃止される可能性があります。(詳細↗)
ペイントプロファイラ(Paint Profiler)
ペイントイベントに関する詳細情報を表示します。[キャプチャの設定(Capture settings)] で [高度な描画パフォーマンスの測定(低速)を有効にする(Enable advanced paint instrumentation (slow)) をチェックしておき、[メイン(Main)] トラックの中で [Paint] イベントをいた場合に表示されます。(詳細↗)

メモリー(Memory)

ツールバー

ヒープスナップショットを撮る(Take heap snapshot)アイコン
メモリスナップショットを取得します。取得する度に、Snapshot 1, 2, 3... のように履歴保持していきます。
プロファイルをすべて消去(Clear all profiles)アイコン
プロファイリングしたスナップショットをすべて消去します。
プロファイルを読み込みます...(Load profile...)アイコン(⤒)
プロファイリングの結果をファイルから読み込みます。
プロファイルを保存します(Save profile...)アイコン(⤓)
プロファイリングの結果をファイルに書き込みます。
ガベージコレクション(Collect garbage)アイコン
ガベージコレクションを行います。

スナップショットペイン

プロファイル(Profiles)
プロファイリングタイプを選択します。
ヒープスナップショット(Heap snapshot)
JavaScript オブジェクトと DOM ノードのメモリ分布を表示します。
タイムラインの計測手法割り当て(Allocation instrumentation on timeline)
JavaScript のメモリ割り当ての推移を表示します。録画開始から録画終了までのオブジェクトを表示できます。これによりメモリリークを見つけることができます。
割り当てサンプリング(Allocation sampling)
サンプリングメソッドを使用してメモリの割り当てを記録します。測定にかかるオーバーヘッドが小さいため、長時間の測定に使用できます。JavaScript 実行スタックごと概算値を知ることができます。
JavaScript VMインスタンスを選択(Select JavaScript VM instance)
JavaScript VMインスタンスを選択します。
スナップショット(Snapshots)
スナップショット履歴の中から表示したいスナップショットを選択します。

詳細ペイン

遠近法(Perspective)選択肢
日本語は「遠近法」になっていますが「視点」の誤訳のようです。
クラスでフィルタ(Filter by class)
表示する JavaScript オブジェクトをクラス名でフィルタリングします。
フィルタ(Filter)選択肢
その他のフィルタ条件を選択します。
コンストラクター(Constructor)
JavaScript のコンストラクタ名(≒クラス名)毎の情報を表示します。
保持者(Retainers)
上部で選択したオブジェクトの詳細情報を表示します。

アプリケーション(Application)

アプリケーション(Application)

マニフェスト(Manifest)
PWA(Progressive Web Application)↗ の manifest.json ファイルに関する情報を表示します。PWA のサンプルデモが プログレッシブ Web アプリのデモ↗ でいくつか紹介されています。
サービスワーカー(Service workers)
サービスワーカー↗ に関する情報を表示します。
ストレージ(Storage)
キャッシュストレージ、サービスワーカー、IndexedDB が使用するストレージの割合を表示します。使用しているストレージをクリアしたり、使用量の上限値をシミュレートしたり、サービスワーカーを削除したりすることができます。

ストレージ(Storage)

ローカルストレージ(Local storage)
localStorage↗ に格納された情報を表示します。
セッションストレージ(Session storage)
sessionStorage↗ に格納された情報を表示します。
IndexedDB(IndexedDB)
IndexedDB↗ に格納された情報を表示します。
Cookie(Cookies)
Cookie↗ に格納された情報を表示します。
プライベートステートトークン(Private state tokens)
プライベートステートトークン↗ に関する情報を表示します。
インタレストグループ(Interest groups)
インタレストグループ↗ に関する情報を表示します。
共有ストレージ(Shared storage)
共有ストレージ↗ に関する情報を表示します。
キャッシュストレージ(Cache storage)
キャッシュストレージ↗ に関する情報を表示します。
ストレージバケット(Storage buckets)
ストレージバケット↗ に関する情報を表示します。

バックグラウンドサービス(Background services)

バックフォワードキャッシュ(Back/forward cache)
バックフォワードキャッシュ↗ に関する情報を表示します。
バックグラウンドフェッチ(Background fetch)
バックグラウンドフェッチ↗ に関する情報を表示します。
バックグラウンド同期(Background sync)
バックグラウンド同期↗ に関する情報を表示します。
バウンストラッキング対策(Bounce tracking mitigations)
バウンストラッキング対策↗ に関する情報を表示します。
通知(Notifications)
Notification↗ に関する情報を表示します。
支払いハンドラ(Payment handler)
決済ハンドラ↗ に関する情報を表示します。
定期的なバックグラウンド同期(Periodic background sync)
定期バックグラウンド同期↗ に関する情報を表示します。
投機的読み込み(Speculative loads)
投機的読み込み↗ に関する情報を表示します。
プッシュメッセージング(Push messaging)
プッシュ通知↗ に関する情報を表示します。
Reporting API(Reporting API)
Reporting API↗ に関する情報を表示します。

フレーム(Frames)

ライトハウス(Lighthouse)

選択項目

Webページを下記のモードや観点から総合評価することができます。

改善提案

例えば、下記のような改善提案を行ってくれます。どの箇所が問題なのか、どのように改善すればよいのかも教えてくれます。

ツール(Tools)

アニメーション(Animation)

自動入力(Autofill)

変更(Changes)

カバレッジ(Coverage)

CSSの概要(CSS overview)

デベロッパーリソース(Developer resources)

問題(Issues)

メディア(Media)

メモリインスペクター(Memory inspector)

ネットワーク状態(Network conditions)

ネットワークリクエストのブロック(Network request blocking)

パフォーマンスモニター(Performance monitor)

クィックソース(Quick source)

レコーダー(Recorder)

レンダリング(Rendering)

セキュリティ(Security)

センサー(Sensors)

WebAudio(WebAudio)

WebAuthn(WebAuthn)

新機能(What's new)

設定(Settings)

設定(Preference)

詳細は「設定(Preference)↗」を参照してください。各項目をクリックするとさらに詳細が表示されます。

デザイン(Appearance)

テーマ(theme)
デザインテーマを [システム設定(System preference)]、[ライト(Light)]、[ダーク(Dark)] から選択します。デフォルトは [システム設定(System preference)]。
パネルレイアウト(Panel layout)
DevTools のパネルレイアウトを [水平方向(Horizontal)]、[垂直方向(Vertical)]、[自動(Auto)] から選択します。デフォルトは [自動(Auto)]。
言語(Language)
DevTools の言語を切り替えます。切り替えた後は DevTools を再起動する必要があります。デフォルトは [English (US)]。
パネルの切り替えにCtrl+1～9の...(Enable Ctrl+ 1-9 shortcut to switch panels)
[Ctrl]+[1～9] キーによるパネル切り替えを有効にします。デフォルトはオフ。
一時停止状態のオーバーレイを無効にする(Disable paused state overlay)
デバッガでコードが一時停止された時、ビューポートの一時停止アイコンを非表示にします。デフォルトはオフ。
更新時に新機能を表示(Show what's new after each update)
Chrome が更新された際に新機能を紹介します。デフォルトはオン。

ソース(Sources)

非同期のコンテンツスクリプト内で検索(Search in anonymous and content scripts)
Chrome 拡張機能によるコンテンツスクリプトも検索対象に含めて検索します。デフォルトはオフ。
サイドバーにファイルを自動的に表示(Automatically reveal files in sidebar)
[ソース(Sources)] の [エディタ(Editor)] のタブでソースを切り替えると、自動的に [ナビゲーター(Navigator)] の選択ファイルを切り替えます。デフォルトはオン。
JavaScriptソースマップ(JavaScript source maps)
JavaScriptの ソースマップ 機能を有効にします。デフォルトはオン。
タブでフォーカスを移動(Tab moves focus)
[エディタ(Editor)] で [Tab] キーを押した時にタブを挿入するのではなく、フォーカス移動するようになります。デフォルトはオフ。
インデントを検出(Detect indentation)
[エディタ(Editor)] で 2, 4, 8スペース、TAB文字など、ソースコードのインデントを検出できた場合、[デフォルトのインデント(Default indentation)] を無視してソースコードのインデントに従います。値を変更した際は DevTools を再読み込みする必要があります。デフォルトはオン。
予測入力(Autocompletion)
[エディタ(Editor)] でオートコンプリートを有効にします。デフォルトはオン。
閉じ括弧の自動入力(Auto closing brackets)
[エディタ(Editor)] で対応する閉じ括弧を自動入力します。デフォルトはオン。
かっこの一致(Bracket matching)
[エディタ(Editor)] で対応する閉じ括弧、開き括弧が無い場合、括弧が薄い赤色でハイライトされ赤い下線が付きます。デフォルトはオン。
コードの折りたたみ(Code folding)
[エディタ(Editor)] でブロックを折り畳んだり展開することができるようになります。デフォルトはオン。
空白文字を表示(Show whitespace characters)
[エディタ(Editor)] で空白の表示方法を選択します。[なし(None)] は表示しません。[すべて(All)] はすべての空白を .. で表示します。[末尾(Trailing)] は末尾の空白のみを薄い赤ハイライトで表示します。デフォルトは [なし(None)]。
デバッグ時に変数値をインライン表示(Display variable values inline while debugging)
デバッグ時に [エディタ(Editor)] の末尾に変数の値をインライン表示します。で空白の表示方法を選択します。[なし(None)] は表示しません。[すべて(All)] はすべての空白を .. で表示します。デフォルトはオン。
ブレークポイントのトリガー時にソースパネルを表示する(Focus Sources panel when triggering a breakpoint)
ブレークポイントで停止した際に、[エディタ(Editor)] で該当の箇所を表示します。デフォルトはオン。何故かオフにしても表示されました。
圧縮されたソースを自動的にプリティプリントする(Automatically pretty print minified source)
圧縮(Minimize)されたソース(*.min.js)を、最下部の {} をクリックしなくても自動的に展開表示(プリティプリント)してくれます。デフォルトはオン。
CSSソースマップ(CSS source maps)
ソースマップ 利用時にコンパイルされた CSS の代わりにソースとなる SCCS ファイルなどを表示することができます。デフォルトはオン。
ファイルの終わりを超えるスクロールを許可(Allow scrolling past end of file)
[エディタ(Editor)] でファイルの末尾を超えてスクロールできるようになります。デフォルトはオン。
Wasm バイトコードで一時停止しない(Do not pause on wasm bytecode...)
デバッグ情報を使用して Wasm をデバッグする際、可能であれば Wasm バイトコードで一時停止しないようにします。デフォルトはオン。
リモートからリソースを読み込むことを許可(Allow DevTools to...)
DevTools がリモートファイルからソースマップなどのリソースを読み込むことを許可します。セキュリティ上の理由によりデフォルトはオフ。
デフォルトのインデント(Default indentation)
デフォルトのインデントを、[2個のスペース]、[4個のスペース]、[8個のスペース]、[タブ文字] から選択します。デフォルトは [4個のスペース] です。

要素(Elements)

ユーザエージェントシャドウDOMを表示(Show user agent shadow DOM)
[DOMツリー] で Shadow DOM ノードを表示します。デフォルトはオフ。
ワードラップ(Word wrap)
[DOMツリー] で長い行を折り返し表示します。デフォルトはオン。
HTML 件のコメントを表示(Show HTML comments)
[DOMツリー] で HTML のコメントを表示します。デフォルトはオン。
カーソルを合わせたDOMノードを表示(Reveal DOM node on hover)
メインパネル上部の [要素選択アイコン] を押してページ内で要素の上にマウスを乗せた時、[DOMツリー] 上の対応する要素をハイライト表示します。デフォルトはオン。
詳細は検査ツールチップを表示(Show detailed inspect tooltip)
[DOMツリー] 上の要素にマウスを乗せた時、ページ上の対応する要素がハイライトされますが、この時にツールチップを表示します。デフォルトはオン。
カーソルを合わせたときに定規を表示する(Show rulers on hover)
[DOMツリー] 上の要素にマウスを乗せた時、ページ上にルーラーを表示します。デフォルトはオフ。
CSSドキュメントのツールチップを表示(Show CSS documentation tooltip)
[スタイル] で CSSプロパティにマウスを乗せた時にプロパティの説明ツールチップを表示します。デフォルトはオン。

ネットワーク(Network)

ログを保持(Preserve Log)
[ネットワーク(Network)] でページを再表示する際に前のネットワークログを消去せずに残します。デフォルトはオフ。
ネットワークログを記録(Record network log)
[ネットワーク(Network)] でページを表示する際にネットワークログを採取します。デフォルトはオン。
ネットワークリスエストのブロック(Network request blocking)
[ネットワークリクエストのブロック(Network request blocking)] に登録された URL やドメインをブロックする・しないを切り替えます。デフォルトはオフ。ただし、このチェックをつけてもつけなくても、[ネットワークリクエストのブロック(Network request blocking)] の [Enable network request blocking] フラグが優先されるようです。
(DevToolsが開いている間に)キャッシュを無効にする(Disable cache (while DevTools is open))
DevTools が開いている間、ネットワークキャッシュを無効にします。デフォルトはオン。
カラーコードのリソースタイプ(Color-code resource types)
[ネットワーク(Network)] のテーブルで、テーブルタイトル右クリックから [ウォーターフォール(Waterfall)] 列を表示している場合、リソースタイプによって棒グラフが色分けされるようになります。デフォルトはオフ。
ネットワークログをフレーム別にグループ化(Group network log by frame)
[ネットワーク(Network)] のテーブルで、フレーム(iframe) によって開始されたリクエストをグループ化して表示します。デフォルトはオフ。
このサイトで広告ブロックを強制(Force ad blocking on this site)
広告と思われるリクエストを強制的にブロックします。デフォルトはオフ。

パフォーマンス(Performance)

Flamechartのマウスホイール動作(Flamechart mouse wheel action)
[パフォーマンス(Performance)] の中段にある [トラックペイン] でマウスホイールを動かしたときの動作を [Zoom] または [Scroll] で切り替えます。デフォルトは [Zoom]。上段の [タイムラインビュー] では常に Zoom 動作になるので、中断の [トラックペイン] は [Scroll] にしておいた方が便利そうです。
(レイヤ)ビューでchromeフレームを非表示(Hide chrome frame Layers view)
[レイヤ(Layer)] ビューで Chrome フレームを非表示にします。デフォルトはオフ。

コンソール(Console)

ネットワークメッセージを非表示(Hide network messages)
[コンソール(Console)] で 404 Not Found などのネットワーク系のメッセージを表示しなくなります。デフォルトはオフ。
選択したコンテンツのみ(Selected context only)
[JavaScriptコンテキスト]選択肢で選択したコンテキストから書き出されたメッセージのみに絞り込みます。デフォルトはオフ。
XMLHttpRequestをログ(Log XMLHttpRequests)
[コンソール(Console)] に XMLHttpReuqests 関連の状況を示すログを表示します。デフォルトはオフ。
タイムスタンプ(Timestamps)
[コンソール(Console)] の出力にタイムスタンプを表示します。デフォルトはオフ。
履歴から予測入力(Autocomplete from history)
[コンソール(Console)] で履歴情報からの予測入力を有効化します。デフォルトはオン。
Enterキーで予測入力の候補を採用する(Accept autocomplete suggestion on Enter)
予測入力の際、Enter キーで入力の候補を採用します。デフォルトはオフ。
コンソールの類似するメッセージをまとめる(Group similar messages in console)
同じメッセージが表示された場合、メッセージを書き出すのではなく、前のメッセージの表示カウントをインクリメント表示します。デフォルトはオン。
コンソールにCORSエラーを表示する(Show CORS errors in console)
コンソールに CORS エラーを表示します。デフォルトはオン。
先行評価(Eager evaluation)
コンソールに変数名などを入力する際に入力が完了する前にマッチする変数があればその値を表示します。デフォルトはオン。
コード評価をユーザアクションとして扱わない(Treat code evaluation as user action)
ユーザが何らかのページ操作を行った場合 navigator.userActivation.isActive↗ が false から true になります。コンソールから JavaScript 操作を行った場合もこのフラグが true になりますが、このチェックボックスをオフにしておくと、true にならなくなります。このフラグをみてフォームに入力中か否かを判断しているようなページのデバッグに有効です。
console.trace()メッセージを自動展開(Automatically expand console.trace() messages)
console.trace() の出力メッセージを自動的に展開します。デフォルトはオン。
移動時のログを保存(Preserve log upon navigation)
ページを再描画した時でもコンソールの表示をクリアせず、保持したままにします。
カスタムフォーマッタ(Custom formatters)
カスタムフォーマッタを利用可能にします。コンソールに表示するオブジェクトの表示方法をカスタマイズすることができます。カスタムフォーマッタは、header, hasBody, body メソッドを持つオブジェクトを window.devtoolsFormatters に登録して利用します。詳細は「Custom Object Formatters in Chrome DevTools↗」を参照してください。 
(function() {
  const style = {"style": "color:red; font-weight:bold;"};
  const userFormatter = {
    header: function(x) { return (x === user) ? ["span", style, `user: ${x.id}`] : null },
    hasBody: function(x) { return x === user },
    body: function(user) {
      return ["ol", style,
        ["li", style, `ID: ${user.id}`],
        ["li", style, `Name: ${user.name}`],
        ["li", style, `Age: ${user.age}`]]}};
  window.devtoolsFormatters = [userFormatter];
})();
const user = {id: "U12345", name: "Yamada", age: 26};
console.log(user);
AIを使用してコンソールメッセージを分析(Understand console messages with AI)
[コンソール(Console)] に表示されるエラーメッセージを、AI を用いて分析して解決策を示します。詳細は「コンソールの分析情報: Gemini でエラーと警告をより深く理解する↗」を参照してください。

拡張機能(Extension)

リンク処理(Link handling)
ファイルリンクをクリックした際の開き方を指定します。デフォルトは [ソース(Sources)] で開きますが DevTools 拡張機能をインストールすると拡張機能で開くことができるようになります。

永続化(Persistence)

ローカルのオーバーライドを有効化(Enable Local Overrides)
[ソース(Sources)] の [オーバーライド(Overrides)] によるローカルオーバーライドを有効にします。デフォルトはオフ。

デバッガ(Debugger)

JavaScriptを無効にする(Disable JavaScript)
JavaScript を無効化します。デフォルトはオフ。
非同期スタックトレースを無効にする(Disable async stack track)
デフォルトではフレームワークが非同期処理をサポートしている場合、[デバッガ(Debugger)] は非同期処理をトレースしようとしますがこれを無効化します。デフォルトはオフ。(→ 参考↗)

グローバル(Global)

DevToolsをポップアップで自動オープン(Auto-open DevTools for popups)
DevTools を開いた状態でも新しいタブを開くリンク (<a target="...">...</a>) をクリックした場合、新しいべーでは DevTools は閉じられたままですが、このチェックをオンにしておくと、新しいページを開く際に自動的に DevTools が開きます。デフォルトはオフ。
入力逐次検索(Search as you type)
[DOMツリー] や [エディタ] で [Ctrl]+[F] (Macは [Command]+[F]) を押した際に開かれる検索で、文字をタイプするたびにリアルタイムに検索結果を表示します。オフにすると Enter を押すまで検索しません。デフォルトはオン。

同期(Sync)

Chromeにログイン済みのアカウント(Signed into Chrome as:)
Chrome にログインしているアカウントを表示します。
設定の同期を有効にする(Enable settings sync)
同じユーザでログインしている他のマシンの Chrome の設定を同期させます。
デフォルトを復元して再読み込み(Restore defaults and reload)
設定した情報をすべてリセットして DevTools を再読み込みします。

ワークスペース(Workspace)

詳細は「ワークスペース↗」を参照してください。

フォルダ除外パターン(Folder exclude pattern)
ワークスペースから除外するフォルダ名を指定します。|...|...| で複数のパターンを指定することができます。/.../ の中では正規表現を使用することができます。
フォルダを追加...(Add folder...)
ワークスペースとして使用するフォルダを追加します。

試験運用版(Experiments)

様々な試験運用機能のリストがあります。詳細は「テスト(Experiments)↗」を参照してください。

無視リスト(Ignore list)

無視リストを管理します。詳細は「無理リスト↗」を参照してください。

無視リストを有効にする(Enable Ignore Listing)
[デバッガー] の無視リストを有効にします。デフォルトはオン。
拡張機能によって挿入されたコンテンツスクリプト(Content scripts injected by extensions)
拡張機能によって挿入されたコンテンツスクリプトを無視します。デフォルトはオン。
ソースマップの既知のサードパーティスクリプト(Known third-party scripts from source maps)
ソースマップの既知のサードパーティスクリプトを無視します。デフォルトはオン。
カスタムの除外ルール(Custom exclusion rules)
無視リストを管理します。無視リストは [ナビゲーター] でファイルを右クリックして [無視リストに追加/削除] からでも追加削除することができます。

デバイス(Devices)

スロットリング(Throttling)

場所(Locations)

ショートカット(Shortcuts)

コマンドメニュー(Command menu)

Copyright (C) 2024 杜甫々
初版:2024年7月21日 最終更新:2024年7月21日
http://www.tohoho-web.com/ex/devtools.html