てんハロ運営者
どもども
今回は「Networkタブ」について解説します。
バグヲ
エラーがでたとき、焦っちゃうよ
みんなどうやって解決してるんだろう…
てんハロ運営者
こんなあなたにピッタリな記事👇
- ボタンを押しても何が起きてるのか分からない
- API通信や送信データを確認したい
- JavaScriptでエラーが出てないのに動かない理由を知りたい
がまぁまぁわかります！
未経験でも気軽に！サブスク型プログラミングスクール【Freeks】
Networkタブとは？
Webページがサーバーとどんな通信をしているのかを確認できるタブです。
🔍 確認できる内容
- どのURLにリクエストを送っているか
- 送った内容（リクエストボディ）
- サーバーから返ってきた内容（レスポンス）
- ステータスコード（200 OK / 404 Not Found など）
- 通信にかかった時間
Networkタブ関連の用語まとめ
| 確認項目 | 意味／使い道 |
|---|---|
| Name | 通信したファイル名やAPIのURL |
| Status | HTTPステータスコード (200 OK, 404 etc.) |
| Headers | 送信/受信したヘッダ情報 |
| Timing | どのプロセスに時間がかかったかを確認 |
| Payload | POSTなどで送ったデータ |
| Initiator | どのコードがリクエストを起こしたかを表示 |
| Preview | 受け取ったデータを見やすく表示 |
| Response | 受け取ったデータを生で表示（見づらい…） |
Initiatorタブの読み取り例
DevTools の「Network」タブでリクエストを選ぶと、右側の「Initiator」欄に次のような情報が表示されることがあります。
例：
l7 @ main.821f6781acf946b1.js:4どういう意味？
main.821f6781acf946b1.jsの 4行目にあるl7という関数がリクエストの発火元l7は意味のわからないランダムな名前に変えられてる名前なので意味は読めない- ファイル名 + 行番号が第一手がかり
🛠 実務での使い方
- 無駄なAPIが呼ばれている原因の特定
- どのイベントが通信を起こしているかを調査
Timingタブの読み取り例
このタブでは、1つの通信にどの工程でどれだけ時間がかかったかを見られます。
例：今回の通信は 約0.5秒（561ミリ秒）かかっています
- Initial connection（接続開始）: 367.61ms
→ サーバーとつなぐための準備。ネットが遅かったり、回線が混んでると長くなる。 - SSL: 183.11ms
→ サイトがHTTPSだと、暗号化するための「手続き時間」がここにかかる。 - Waiting for server response: 192.04ms
→ サーバーが応答を返すまでの待ち時間。処理が遅いとここが長くなる。
🧠 ポイント
- 合計が長い＝表示が遅い原因がある
- どこに時間がかかっているかを見れば、原因が「ネットか？サーバーか？」が分かる
JavaScriptでエラーが出ていないのに動かない理由は？
console.log() では何も出てないのに画面が止まっている場合、通信エラーやバックエンドからの空返答が原因かもしれません。
→ Networkタブで通信内容・レスポンスをチェックすることで、画面が更新されない理由を特定できます。
🧨 こんなエラー遭遇したら…
- ボタンを押しても動かない
- エラーが出ないのに動作しない
🕵️♂️ココを確認
- Networkタブで通信が起きてるか
- Statusは200か？
- Responseの中身は何が帰ってきてる？
てんハロ運営者
おつかれさまでした！
コメント