F12キーNetworkタブの使い方｜Web開発で通信の中身を確認！

でじぼうです。

F12キーで開くブラウザの開発者ツール（DevTools）の、特に重要な Network（ネットワーク）タブ の使い方を、未経験エンジニア向けにやさしく解説します！

でじぼう

この記事は下記の方がおすすめ！

Networkタブとは？

Webページがサーバーとどんな通信をしているのかを確認できるタブです。

確認項目	意味／使い道
Name	・通信したファイルやAPIのURL
Status	・200, 404, 500などのHTTPステータスコード・エラー判定に使える
Headers	送信されたヘッダー／受け取ったヘッダーを確認できる
Timing	・リクエストが「いつ始まり」「どこで時間がかかっていたか」を細かく確認できる・通信が遅いと感じたときに、原因が接続なのか？ダウンロードなのか？等を判断するのに役立つ
Payload	送信されたデータ（POSTの内容）を確認したいときに使う
Initiator （イニシエーター）	この通信が何が発火のきっかけかを表示。例：`fetch.js:10` など
Preview	サーバーから返ってきたデータ（レスポンス） JSONやHTMLを見やすく整形して表示
Response	サーバーから返ってきたデータ（レスポンス）そのままのJSON文字列やHTMLなどを表示

l7 @ main.821f6781acf946b1.js:4

上記は、main.821f6781acf946b1.js の4行目にある l7 という関数が、通信の実行に関係している
と読み取れます。

この通信は、合計で561.46ミリ秒（約0.5秒）かかっており、比較的時間がかかったリクエストです。

Initial connection（接続開始）: 367.61ms
→ サーバーとの接続にかなり時間がかかっており、ネットワークの混雑や遅い回線の可能性があります。
SSL: 183.11ms
→ HTTPSの暗号化処理に時間がかかっている状態。SSL証明書の処理が重かった可能性も。
Waiting for server response: 192.04ms
→ サーバーが応答を返すまでの待ち時間。サーバー処理が遅れている可能性もあります。