ブラウザでの表示状況を調査・確認するのに欠かせない、Chromeの開発ツールのnetworkパネルの使い方についてのまとめ。
なお、microsoftのedgeでも全く同じ開発ツールを使っている。
目次
- Dev toolの起動
- networkパネルの主な挙動
- Preserve log
- Disable Cache
- スクリーンショットの記録
- ネットワークの切り替え
- フィルタリング
- waterfall
- ファイルごとの詳細情報
Dev toolの起動
ctrl + shift + I
networkタブをクリックする。
networkパネルの主な挙動
- デフォルトは何もない（開いている間の通信のみを記録するため）
- 左上に赤い丸があるときの通信は記録する（クリックして黒丸にしたら通信は終了）
Preserve log
すべてのログを保存（preserve）する。
Disable Cache
Disable cacheにチェックをいれると、キャッシュを利用しなくなるので、リロードしても初回訪問時と同じ読み込み速度になる。
スクリーンショットの記録
呼び出してから表示されるまでの画面のキャプチャを時系列で確認することができる。
レンダリングのスピードや描画状況を調べることができる。
昔のchromeではビデオアイコンがあったが、現在は歯車をクリックし、capture schreenshotにチェックマークをいれる。
キャプチャ画像を選択したときに下のwaterfallに表示される黄色い線が描画している位置を表している。
ネットワークの切り替え
オンライン（現在のネットワーク通信）や3G、オフライン状態でページがどのように表示されるかを簡単に確認することができる。
addをクリックすれば、好きな設定を追加することもできる。
フィルタリング
取得したログのフィルタリング方法はいくつかある。
- 任意のフィルタリング
- リクエストタイプによるフィルタリング
- Hide data URLs
- 経過時間によるフィルタリング
任意のフィルタリング
左上の検索窓でフィルタリングができる。
マッチするファイル名を入れてもいいし、専用の検索ワードを使うこともできる。
リクエストタイプによるフィルタリング
XHRとは？
Ajax (非同期通信) に使われる組み込みオブジェクト。非同期通信でリクエストを送っているリソースを確認することができる。
XMLHttpRequestの略。
Hide data URLs
data URLとは、ドキュメントに埋め込まれた小さなファイル。冒頭にdata:がついたスキーム。
URLだけで画像や音楽、動画などを埋め込むことができる便利スキーム。
↓ Hide data URLsにチェックをいれると非表示にできる。
経過時間によるフィルタリング
経過時間を絞って、その期間だけのファイルを表示することができる。
ログパネル
各ファイルのログを確認することができる。
| 項目 | 内容 |
|---|---|
| Name | ファイル名 |
| Status | HTTPステータスコード |
| Type | MIMEタイプ |
| Initiator | リソースを呼び出す初期リクエスト |
| Size | ファイルのサイズ（レスポンスヘッダーとボディ） |
| Time | リクエストの開始から最後のレスポンスまでの合計時間 |
| Waterfall | 各アクティビティのビジュアル表示 |
ログパネルの編集
カラム名で右クリックすれば、カラムの追加や削除ができる。
↓ method, protocolなどを追加
waterfall
waterfallで各ファイルがリクエストから表示までにかかった時間を確認することができる。
各ファイルを選択して、timingにしても同じ情報を確認できる。
| 項目 | 内容 |
|---|---|
| Queing | ブラウザがリクエストをキューに入れたタイミング |
| Stalled | リクエストを送信できるようになるまでの待機時間 |
| DNS Lookup | ブラウザがドメイン名からIPアドレスを参照するのにかかった時間（名前解決にかかった時間） |
| Initial connection | TCPやSSLの接続を確立するのにかかった時間 |
| SSL | SSLハンドシェイクの完了にかかった時間。（TCP = Initial connection - SSL） |
| Request sent | リクエストの送信にかかった時間 |
| Waiting(TTFB) | 初回のレスポンスまでにかかった時間。サーバーがリクエストを受け取ってからレスポンスを返すまでの時間となる。TTFBとも呼ばれる。（Time To First Bite） |
| Content Download | ブラウザがレスポンスを受け取るまでの時間 |
ファイルごとの詳細情報
ファイル名をクリックすると詳細情報を確認することができる。
ファイルの種類によっては、CookiesとInitiatorはない。
1. HTTP Headers
HTTPヘッダーの確認
表示されるHeadersの情報はファイルによって異なる。
（参考）ヘッダーの詳細
2. Preview
レスポンスのボディのプレビューを確認できる。
▼content-type: image/jpegの例
▼Content-Type: application/javascriptの例
▼content-type: text/html; charset=utf-8の例
3. Response
レスポンスのボディーを確認できる。
▼content-type: text/html; charset=utf-8の例
▼Content-Type: application/javascriptの例
4. Timing
リクエストから画面表示にかかるまでの時間の詳細が確認できる。
各項目はwaterfallを参照。
5. Cookies
クッキーの情報を確認できる。
| 項目 | 内容 |
|---|---|
| Name | クッキー名 |
| Value | クッキーの値 |
| Domain | クッキーの受け取りを許可されたホスト |
| Path | リクエストに存在するURL |
| Expires / Max-Age | クッキーの最大有効期限 |
| Size | クッキーのサイズ[bits] |
| HTTP only | ✔︎（true）の場合、クッキーをHTTPのみで使用。JSは許可しない |
| Secure | ✔︎（true）の場合、HTTPSのみクッキーを送信 |
| SameSite | 同一サイトのみクッキーを許可するかどうか（none, strict lax） |
Googleの主なクッキー
Googleは広告のリタゲなどで使用されており、doubleclick.net配下に保存されている。
1. IDE
広告の有効性を測定し、お客様にターゲット広告を提示する目的で、広告主の広告の一つを閲覧・クリックされた後のお客様の活動を登録・報告するために使用。
2. DSID
オンライン広告のリターゲティング、最適化、報告及び帰属表示のために使用。