Chrome の devtools を使いこなす Part2 | ネットワーク編

はじめに

今回は devtoolsを使いこなせるようになろうPart2、ネットワークパネル編です.
(各パートごとに紹介する内容を分けているので、Part1を読んでなくても大丈夫です！)

この記事は、devtools のドキュメントを参考にしています.
(参考)

最もよく使用されるネットワークパネルの使い方

• リソースがアップロード中または、ダウンロード中を確認する
• 特定のリソースのHTTPヘッダー, コンテンツ, サイズなどを調べる

ネットワークパネルの見方

• リソースのリストは読み込まれた順に表示される

• リソース名を押すと、header情報やレスポンスの情報が見れる

• ネットワークパネル上部のthrottlingプルダウンから、低速モードの場合のシミュレーションができる

• ネットワークパネル上部の検索マークから、cache-control など、http header の文言を検索すると、それに当てはまるリソースを検索できる

• ネットワークパネル内の歯車マークから、ScreenShots を押すと、時系列ごとに、表される内容を可視化できる

• 検索マーク横にある、Preserve log を押すと、リソースのログが保持される

  • デフォルトでは、リソースのログはリロードするたびに新しくなる (保持されない)

• 左下で、総リクエスト数と、やり取りされたデータ量が表示されてる
  
  リクエスト数とデータ量

• Status, Type, Initiator(どのページが呼び出したか), Size, Time (そのリソースを読み込むのにどれぐらいかかったか)

  • テーブルのヘッダー部分を右クリックすると、見れる情報を追加または非表示にできる
    
    リソーステーブルのヘッダー部分

まとめ

今回は、ネットワークパネルについて、基本的な内容から知っておくと便利そうな知識まで紹介しました.
(参考)
ネットワークパネルをしっかり使いこなせるようになったら、バックエンドとの通信のデバッグやパフォーマンスチューニングの際に役立ちそうです！

今回紹介した内容は、テキストではわかりにくいところも多いと思うので、YouTubeにも上げる予定です. 気になる方は、ぜひ見てください！