【Chrome開発者ツール】開き方と見方、ログの保存方法

Web アプリのトラブルシュートツールとしての開発者ツール

ブラウザの開発者ツールは Web アプリを作る際のデバッグツールとして活用するだけでなく、様々な使い方がありますが、今回はトラブルシュートツールとしてのさわりを紹介します。

トラブルシュートとしてパケットを見るというと Wireshark でのパケットキャプチャが有名ですが、このご時世 https による暗号化が当たり前になっており、パケットキャプチャでは http のやり取りを見ることが難しいです。少なくとも復号しないといけません。

それに加え、http/2, http/3 はパケットが見にくいです。

そのため、パケットキャプチャに変わる手段として、非常に手軽に使えるトラブルシュートツール【ブラウザの開発者ツール (Developer Tool)】が便利です。

ブラウザをアクティブにした状態で F12 キーを押すと次のように表示されます。ここではブラウザは Chrome をモデルとしていますが、Edge や Firefox でも非常に似た使い勝手で開発者ツールを使うことができます。

まずは [Network] タブを見ましょう。

基本的には [Network] タブを開いた時点で以下のように赤丸が表示されており、これはネットワークに流れる http(s) 通信が記録される状態になっています。

表示された画面と、そのページに埋め込まれたリンク (css や jpg 等) がログ (記録) され、表示されます。

例えば jquery.min.js を取得するための GET リクエストのやり取りは、以下のように左ペインで jquery.min.js をクリックします。すると右ペインに Headers (Response と、下図には見えていないが下の方に Request ヘッダも) が表示されます。

ですがこの状態では、別のページに遷移した場合、前のページのログが上書きされてしまいます。前のページのログを残し続ける場合は、右側にある「Preserve log」にチェックを入れます。

トラブルシュートを行う際には、リモートにいる分かる人に見てもらうこともあるでしょう。その場合は以下の手順でログを .har ファイルとしてエクスポート (保存) します。

そして保存した .har を解析する人に送りましょう。

先ほどの Export ボタンの 1 つ左隣にある↑矢印 (Import HAR file) ボタンをクリックすると、ファイル選択画面になりますので、har ファイルを選択すると、ログが見られるようになります。