背景

最近WebサイトのFrontend側コードを書くことが多いのですが、デバッグとかしていて自分は開発者ツールの機能をまだまだ使いこなせていないな～と実感することがありました。
そういうわけでChromeの開発者ツールドキュメントを一通り読んでみたら、案の定、開発や不具合調査で有用そうなのに知らん機能が結構ありました。

この記事は、自分が開発者ツールのDocsを読んだり、あるいは実際に使っていて「この機能良いな、こんな場面で有用だな」と感じたものを、やりたいことからの逆引き的に紹介することを目指しています。

使い方としては、 目次をざっと眺めていただき、気になるものがあれば見ていただく 、みたいな使い方が良いかもしれません。
目次をざっと眺めていただくことで、あなたにとっての「こんなのあったんだ！便利～」な項目が一つでも見つかったなら幸いです。

本記事では、個人の主観で認知度低そうだけど便利なもの、使用頻度の高そうなものを取り上げるので網羅的な記事ではありません。
また、Chromeのバージョン: 133.0.6943.127　時点での機能の紹介となります。

記事の構成

主に使いどころの想定から、以下の4ジャンルに分けています。

複数のジャンルに当てはまりそうなものは、より上のジャンルに記載しています。

ジャンル	詳細
開発	表示条件（通信速度、メディア種別）の再現や、API
レイアウト確認	スタイルや文書構造の確認など
デバッグ	コード実行の停止、変数の値の監視など
テスト	エビデンス取得、テストの自動化など

開発

通信の内容（リクエスト/レスポンスやヘッダー）を確認する

[ネットワーク]タブ　を開く。
リクエストURL、リクエストボディ、メソッド、レスポンスステータス、レスポンスボディ…といった情報を確認できる。

サーバーからレスポンスを受け取れているか？
想定通りの形式で受け取れているか？などを開発の時、確認するのに有用。

参考：ネットワークアクティビティを検査する

animation / transition のタイミングを、ベジェ曲線を動かして設定する

[要素]タブ -> [スタイル]タブ　を開く。
transitionのプロパティにある紫色のアイコンを押すとエディタが開く。
下部の矢印ボタンからプリセットの動きを確認しながら設定することもできるし、
実際にベジェ曲線を操作してカスタマイズもできる。

参考：イージングエディタでアニメーションと遷移のタイミングを編集する

キャッシュを無効にする

[ネットワーク]タブ -> [キャッシュを無効化]　をチェックする。

参考：ブラウザキャッシュを無効にして初めて訪問したユーザーをエミュレートする

キャッシュデータの中身を確認する

[アプリケーション]タブ -> [ストレージ] -> [キャッシュストレージ] を開く。
具体的にどんなデータがキャッシュに入ってるのか見られる。

参考：キャッシュデータを表示する

モバイルデバイス環境をエミュレートする

[デバイスのツールバー]アイコン　を開く。（※画像赤枠）
実在するデバイスのサイズを再現したり、タブレットのタップ動作(touch系イベント)を再現したりできる。

参考：Device Mode でモバイルデバイスをシミュレートする

レイアウト確認

画面上の要素のinnerText、属性、スタイル等を確認・編集する

[要素]タブ　を開く。
表示中のDOMツリーの属性やinnerText、styleなどを書き換えることができる。
※[要素]タブの左にある矢印のアイコンを押下すると、ページ中要素を選んで、DOMツリーの対応箇所に飛ぶこともできる。

参考：DOM ノードを表示する

要素に当たっているCSSスタイルの全量を確認する

[要素]タブ -> [スタイル]タブ　を開く。

[スタイル]タブで表示されるのは、適用されているcssルールの全量。
無効状態のものや詳細度が低いものは、明示されるものの数が多いため、最終的に割り当たっているスタイルを確認する場合は、計算済みタブの方が見やすいかもしれない。

参考：要素の CSS を表示する

要素に当たっているCSSスタイルの詳細度（ツリー）を確認する

[要素]タブ -> [計算済み]タブ　を開く。
割り当たっているスタイルの内、有効なものを一覧で表示できる。
また、画像例の"color"プロパティのようにアコーディオンを開くと、複数のスタイルが割当たっている場合に、詳細度の関係で無効になっているスタイルやその定義ファイルを確認することができる。

「スタイルを当てたけど有効にならないな？」という時、他の指定方法でスタイルが割り当たっていないか？といったことを確認するのに有用。

要素をclickしたり、hoverした状態で固定する

[要素]タブ -> 「スタイル」タブ -> [:hov]ボタン　を開く。

「フォーカスのあるページをエミュレート」、「要素の状態を強制」は似た概念にも見えるが以下のような使い分けがある。

種別	概要	使い道の例
フォーカスのあるページをエミュレート	JavaScriptのfocusイベントを再現する	フォーカス時のみ表示される要素のスタイルを確認したい場合
要素の状態を強制	要素にactiveやhoverの状態を当てる	hover時のスタイルを確認したい場合

「フォーカスのあるページをエミュレート」は、チェックを入れた後にフォーカスする操作が必要（チェックするだけでフォーカスされた状態になるわけではない）で、「要素の状態を強制」と若干使い方が違うので注意。

使用例：

※「フォーカスのあるページをエミュレート」に未チェックの状態でアプリ一覧のDOM要素を選ぼうとすると、フォーカスを外した瞬間消えてしまうが、チェック後は表示されたままになるため要素が選択できる。

参考：状態を強制

イベントの種類に寄らず汎用的に止める方法の一つとして、debuggerコマンドで任意のタイミングでデバッガーを起動するのもおすすめ。
例えば以下のようにConsoleに張り付け、確認したい要素を表示する操作をして、3秒後にデバッガーが起動するのを待つ。

setTimeout(() => {debugger}, 3000)

GridやFlexレイアウトのプロパティを視覚的に確認・設定する

[要素]タブ -> [スタイル]タブ -> grid/flexのスタイル指定横のアイコンを押す。

※下画像のように、display: grid や display: flex のスタイル指定の横の四角が並んだアイコン。

gridやflexでは、並べたりコンテンツを寄せたりする際に有効なプロパティが異なる場合もあり、かつ指定できる値の種類も多く覚えづらい。
この機能を使えば、要素の並べ方はこれ、寄せ方はこれ…という感じで、ボタンで切り替えるだけで設定ができるので、開発時にスタイルを調整しやすい。

参考：グリッドエディタでグリッドアイテムとそのコンテンツを配置する

レイヤーの重なりを視覚的(立体的に)確認する

表示域外の要素の状態を確認する

※どうしても2つの使い道を紹介したくて2つ見出しつけました。
[レイヤ]タブ　を開く。

まず、 レイヤーの重なりを視覚的(立体的に)確認する から。
表示中の画面で、z-indexの異なる要素が枠線で囲まれ表示される。
また、角度を変えて重なりを確認することもできる。

下のサンプルページでは、下記のような構造になっており、レイヤタブで重なりが確認できます。
１：画面下部の「固定メニュー」
２：画面左上のメンフクロウの画像
３：その他の最背面のダミーテキスト

次に、 表示域外の要素の状態を確認する 。

凝ったページだと、画面外から移動させるアニメーションだとか、スクロールだとか、そういったものが結構出てきます。目に見えない範囲なのでいまいちイメージが付きづらいと思うんですが、レイヤタブだと表示域外の要素がどういった状態なのかも見られるので把握しやすくなります。

下のサンプルページでは、スワイプで表示する要素を切り替えており、レイヤタブで表示域外の状態も確認できます。

参考：ドキュメントのレイヤを確認する

デバッグ

コンソール出力

以下で紹介する console.＊＊ は正確にはブラウザの機能ではないけど、便利だしdocsに載ってたので一応記載。

参考:Console API リファレンス

オブジェクトを表形式で出力する

console.table(object) を実行する
※ブラウザ上で実行する際は[コンソール]タブを開いて確認できる。

上の赤枠は、console.logで出力したもの。下の赤枠は、console.tableで出力したもの。
console.logでもデータは出力できるけど、配列で大量にデータがある、といった場合はこちらの方が見やすい。

呼びだし回数をカウントする

console.count() を実行する
※ブラウザ上で実行する際は[コンソール]タブを開いて確認できる。

処理の呼びだし回数を手軽に測りたい場合は有用。
これも変数定義してconsole.log()使って…という方法で代替できるけど、手軽で良い。

ページをまたいでもログ(コンソール/ネットワーク)が消えないようにする

[コンソール]タブ　※または[ネットワーク]タブ　-> [ログを保持]をチェックする。
通常はページをまたぐタイミングでログがリセットされるが、画面上部に出てくる「ログを保持」にチェックを入れると、ログが残る。

[コンソール]タブの方はデフォルトだとチェックボックスがないので歯車マークから表示する。

参考:ページの読み込み間でメッセージを保持する

ブレークポイント

とりわけ、ブレークポイントの張り方については、ここで紹介していないものについてもdocsの方で一通り目を通しておくのがおすすめ。
結構種類があって、痒い所に手が届くような方法を見つけられるかもしれないので！

参考:ブレークポイントでコードを一時停止する

条件を指定して止める

[ソース]タブ -> 行数で右クリック -> 「条件付きブレークポイントを追加」を押す。

指定した条件がtrueの場合のみ止まる。「呼びだし回数が多いが、不具合が限定された条件の場合のみ起こる」といった場合に有用。

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

DOMに変更があったら止める

[要素]タブ -> DOM要素で右クリック -> [ブレークポイントの位置]

条件として3種類指定できる。

種類	概要
サブツリーの変更	ブレークポイントを張った要素よりも下位のノードで、 DOM構造の変更（要素の追加、削除など）があった場合に停止する
属性の変更	ブレークポイントを張った要素の属性(classやstyle等)に変更があった場合に停止する
ノード削除	ブレークポイントを張った要素よりも下位のノードが削除された場合に停止する

以下の例だと、class="formula"という要素のclassやstyleを追加したタイミングで、classList.addなどの変更処理をしているJavascriptコードで処理が停止する。

このブレークポイントを張ると、対象の変化を起こしているコードで処理が停止する。

reactの動的なスタイル指定（<div className={(条件)? "": "クラス名"}>　のような指定）で試したところ動作しなかったが、refを使って ref.current.className="クラス名" のように書き換えると動作した。
reactのように何かしらライブラリ使って、前者のような指定をすることが多い気はするので、そのパターンだと役立てるのは難しいかもしれない…

参考:DOM 変更ブレークポイント

通信（XHRリクエスト）が発生したら止める

[ソース]タブ -> [XHR / フェッチブレークポイント]　を開く。

デフォルトだと「任意のXHR またはフェッチ」の選択肢のみ存在する。右上の＋ボタンから、URLに含まれる文字を指定してブレークポイントを追加設定できる。
エラーハンドリングをミスって、想定外の動作をした時のデバッグの時に多用する。

参考:XHR/フェッチブレークポイント

例外が発生したら止める

[ソース]タブ -> [ブレークポイント]　を開く。

Javascriptの例外発生時に、発生したコードで処理を止める。
[範囲]　から、エラー発生時点の変数等の状態を確認できて便利。

Javascript式の評価結果をリアルタイムで出力する

[コンソール]タブ -> 目のアイコン　を押す。

変数名を入力してエンターを押すと、コンソール上部に評価結果をリアルタイムで出力できる。
※下の例では、1秒ごとにランダムな値をhogeにセットしている。hogeの評価結果は画面上部に固定され、リアルタイム(250ミリ秒)ごとに更新し続ける。

参考: ライブ式を使用して式の値をリアルタイムで確認する

アニメーションを停止したり、速度を変えて再生する

[アニメーション]タブ　を開く。
※表示されていないときは、縦三連ドットのアイコンから開ける。
速度を変更したり、停止したり、動かしている要素の状態を確認することができる。

参考: アニメーションの詳細を表示する

テスト

###スクリーンショット撮影

開発者ツールを開いた状態で、 Ctrl + Shift + P -> [スクリーンショットをキャプチャ]を押す。

他にもいくつか種類があるが、違いは以下の通り。

名前	詳細	キャプチャ例
スクリーンショットをキャプチャ	表示域のスクリーンショットを撮影する。
ノードのスクリーンショットをキャプチャ	選択中の要素の部分だけクリッピングして撮影する。 [要素]タブでDOMツリーを選択した状態で右クリックからも撮影できる。例だと、h1タグを選択してキャプチャ。
フルサイズのスクリーンショットをキャプチャ	表示域外も含めた、ページ全体のスクリーンショットを撮影する。
領域のスクリーンショットをキャプチャ	コマンド選択後、領域を選択するためのカーソル(+)になるため、その状態で選択した領域を撮影する。

参考: DevTools でスクリーンショットをキャプチャする 4 つの方法

ネットワークタブの内容（通信ログ）をエクスポート/インポートする

[ネットワーク]タブ -> エクスポート/インポートアイコンを押す

画像左上の赤枠のアイコンがエクスポート/インポートアイコン。
HARファイルをやり取りすれば、他の作業者に通信ログ（画像下部の赤枠部分）をそのまま確認してもらうことも可能。

「すべて」「Fetch/XHR」などのボタンや、単語でのフィルタリングをした状態でエクスポートすると、そのフィルタリング結果を選択的に出力することができる。

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

ブラウザでの操作を記録し再実行できる

[レコーダー]タブを開く。

記録中のページの操作を記録できる。そのまま「リプレイ」ボタンで同じ処理を再実行したり、エクスポートしてPuppeteer(ブラウザ操作用のライブラリ)で使用したり、といったことができる。
これを使って、画面テストの自動化やテストデータの半自動生成などに活かせるかもしれない。

記事作成時点で、途中でスクリーンショットを撮る処理を記録することはできなかった。
仮に画面テストの自動化でスクリーンショットの撮影が必要な場合は、操作だけレコーダータブで撮る→Puppeteerに取り込み、スクリーンショット撮影の処理を入れる、といった方法をとる必要がありそう。

操作例にもあるように、alertで出したダイアログなどは操作内容が記録されないため、手動で閉じる必要がある。

参考: ユーザーフローを記録、再生、測定する

あとがき

開発者ツール自体は新卒入社から使ってきたのですが、公式ドキュメントをまともに読んだことがなく、感覚で使っている部分が多かったな、というのが所感です。

今回紹介した中でも、「GridやFlexレイアウトのプロパティを視覚的に確認・設定する」と「ブラウザでの操作を記録し再実行できる」あたりがお気に入りです。
前者の機能で実際にFlex/Gridレイアウトを使った開発で、プロパティを調べなおす手間がなくなりましたし、後者の機能はブラウザバリエーションのテストの自動化に便利そうだな～と思っています。

これでもっとFrontend側の開発速くするぞ！！！