この記事は株式会社ガラパゴス（有志）アドベントカレンダー2024の13日の金曜日の記事です。
Chrome DevToolsの使い方はTipsの集合
Chrome DevTools（以下、DevTools）は何かと便利な機能があるのですが、新機能も次々に出るので、体系的に使い方がまとまっているというより、個別のTipsを組み合わせて各々が独自の方法で使っているのかなあという印象です。
ということで、2024年で個人的にお世話になったDevToolsの機能を紹介したいと思います。
APIのレスポンスをオーバーライドする
2024年で一番よく使った（使いこなしていた）と思う機能は、フェッチリクエストのレスポンスをオーバーライドする機能でした。
上記ドキュメント内の動画、Prototype new UI designにあるようにstatusCodeが404でもオーバーライドできるので、存在しないエンドポイントでもオーバーライドしてフロントの開発を進めることができます。
主には、APIの開発とほぼ同時進行でフロントの開発を進める時に活躍した機能でした。ローカルのフォルダを指定すると、そこにオーバーライド用のファイルが保存され、リロードしてもローカルファイルを読み取るので、一度保存すれば、DevToolsを開いている間はオーバーライドのモックを使うことができます。（DevToolsを閉じても、再度開けばオーバーライドは保持されています。）
ローカル環境のDBを操作したりMSWのようなモックを使うより、かなりお手頃にレスポンスを操作できるので、GETメソッドのみのフロント開発ではほぼ毎回使っていた記憶があります。
また、本番環境のデータをローカルで再現したい場合などは、本番環境でDevToolsを開き、ネットワーク > 該当のリクエスト > レスポンス と進むとそのままレスポンスをコピーできるので、ローカルのオーバーライドで貼り付ければOKです。（ローカルにファイルとして残るので、内容は要注意です。）
特定の環境で起こったフロントの不具合を見つけるのにも重宝しました。
コンソールログでリロードしてもログを保持する
これは地味ですが、ハードナビゲーションでリロード前のコンソールログも併せて追いたい場面があり、この機能に助けられました。
画像の歯車アイコンから「ログを保持」にチェックを入れると（おそらく）DevToolsを開いている限り永遠にログを保持し続けます。
🚫マークでログを消去できるので、リロードを伴うログ確認をしたい場合は、「ログを保持」にした状態で必要に応じて消去する方法で開発していました。
パフォーマンスタブ
まだまだ使いこなせていないのですが、パフォーマンスタブは最近新しくなり、とっつきやすくなった印象です。
Interaction to Next Paint (INP)の計測
パフォーマンスタブを開いた状態で、クリックやキーボード操作を行うと添付画像のようにINPを計測してくれます。
Reactを使ったプロジェクトでレンダリングが遅い箇所で計測したらINPも悪いスコアだったので、操作の遅延を感じたらこの機能でまずは見てみるのが定石なのかもしれません。
CPU、ネットワークのエミュレーション
ネットワークワークタブで「高速4G」「低速4G」などネットワークスピードの設定はよく使っていたのですが、パフォーマンスタブではCPUとネットワークの両方を操作できるようです。（以前から設定できたのか不明。）
要素タブ > プロパティ
要素タブの中に「プロパティ」タブがあるのですが、input要素のvalueを見たり、このDOMはどんなプロパティあるんだっけという時に、時々見ています。
あまり活躍の機会はないのですが、UIライブラリなどDOMをコードで直接見づらい場合に、実際に描画されたDOMがどのように値を保持しているのかなどを知るのに重宝しています。
結び
AIアシスタント機能が日本語のDevToolsでも使えるようになったりと、ブログを随時チェックせねばと思う今日この頃です。
株式会社ガラパゴス（有志） 株式会社ガラパゴスのエンジニアを中心に情報発信をしている Publication です。 各記事の内容は個人の意見であり、企業を代表するものではございません。
Discussion