Chrome デベロッパーツール Networkパネルの使い方

Chrome デベロッパーツールのNetworkパネルでは、Webページでロードされるリソースに関するデータを収集することができます。リソースサイズ、ローディング時間、HTTPヘッダーなどを確認することができ、パフォーマンス改善に役立てることができます。

Networkパネルでは具体的に以下のことが可能です。

  • 各リソースがリクエストされてから受信完了するまでの時間確認
  • リクエストヘッダー/レスポンスヘッダーの確認
  • 送信されたクッキーの確認
  • 記録したデータのHARフォーマットでの保存

【コンテンツ】

  1. Networkパネル外観
  2. データの記録
  3. データ項目の追加・ソート・フィルター
  4. Timeline ビュー
  5. データのコピーと保存
  6. 詳細データの確認

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

Networkパネル外観

Networkタブをクリックすると下図のようなパネルが表示されます。

Networkパネル外観

1 データの記録や表示を制御するボタンです。

2 データ項目のタイトルです。
タイトルの下の値は、各リソースが1行ずつ表示されたテーブルとなっています。
また、どの項目を表示するかは選択できます。

3 各リソースのローディング時間を示す、Timeline ビューです。

4 通信の概要を示すステータスバーです。

データの記録

Networkパネルを表示したときは、データは何も記録されていません。
データを記録するには、ページをリロードします。

Recordボタンがアクティブ(赤)の状態でページをリロードしたり違うページに移動すると、それまでのデータは破棄されて新しいデータが取得されます。

Recordボタンがアクティブ

Recordボタンがインアクティブ(黒)の状態では、新たにデータは取得されません。

Recordボタンがインアクティブ

表示されているデータを保持したまま新しくデータを取得するには、[Preserve log]にチェックを入れておきます。
その状態でページ移動すると、それまでのデータの下に追加されます。

データ保持のチェック

【注意!】
Recordボタンをインアクティブにした後、再度クリックしてアクティブにするとデータは破棄されます。

データ項目の追加・ソート・フィルター

項目の追加

表示する項目を追加するには、タイトル行の上で右クリックしリストから選択します。

項目追加メニュー

データのソート

デフォルトでは、データはリクエスト順に表示されます。
ソートしたいタイトルの上でクリックするとソートできます。

データのソート

もう一度同じタイトルの上でクリックすると昇順/降順が入れ替わります。

昇順/降順入れ替え

Timelineだけは、クリックするとソートするオプションリストが表示されて選択できます。

Timelineのクリック

データのフィルター

表示する項目を絞り込むには、Filterボタンをクリックします。

フィルターボタンをクリック

デフォルトではすべてのデータを表示する'All'になっていますが、Documents、Stylesheets、Images、Scripts、XHR、Fonts、WebSockets、Otherをクリックして絞り込むことができます。

Documentsによる絞り込み

Filterボックスの中に文字を入力すると、'Name'か'Path'の中に一致する文字列で絞り込むことができます。

文字による絞り込み

Timeline ビュー

Timelineビューは、各リソースがロードされるのにかかった時間、つまりHTTPリクエストヘッダーを送ってから最後のデータを受信するまでの時間をバーチャートで示します。

リソースタイプによりバーは色分けして表示されます。
さらに色の薄い部分は待機時間を示し、色の濃い部分はデータ受信時間を示しています。

Timelineビュー

リソースタイプによるバーの色の違いは以下のようになっています。

リソースタイプによるバーの色の表

バーの上にマウスカーソルをのせると、タイミングデータの詳細がポップアップで表示されます。

タイミングデータの詳細表示

青い縦線は、メインコンテンツのローディングと解析完了を示すマーカーです。
赤い縦線は、すべてのリソースのローディング完了を示すマーカーです。

青と赤のマーカー

データのコピーと保存

各リソースの行の上で右クリックするとメニューが現れ、クリップボードにリソースURLやレスポンスデータをコピーすることができます。

コピーメニュー

記録したデータ全体をファイル保存するには、右クリックして[Save as HAR with content]を選択します。
HARフォーマットでファイルを保存することができます。

ファイル保存メニュー

保存したファイルは、以下のページ(Chrome HAR Viewer)へドラッグ&ドラッグするとデータを表示することができます。
http://ericduran.github.io/chromeHAR/

Chrome HAR Viewer サイト

詳細データの確認

各リソース名をクリックすると詳細データを確認することができます。
詳細データとしては以下のものがあります。

  • HTTPリクエストヘッダー&レスポンスヘッダー
  • リソースプレビュー
  • HTTPレスポンス
  • クッキー
  • WebSocketフレーム
  • タイミングデータ

HTTPリクエストヘッダー&レスポンスヘッダー

[Headers]タブをクリックして表示します。
以下のデータが表示されます。

  • リモートアドレス
  • リクエストURL
  • リクエストMethod
  • ステータスコード
  • リクエストヘッダー
  • クエリストリング
  • レスポンスヘッダー

Headers画面

リソースプレビュー

[Preview]タブをクリックして表示します。
画像などのプレビューが表示されます。

Preview画面

HTTPレスポンス

[Response]タブをクリックして表示します。
リクエストに対するレスポンスデータが表示されます。

Response画面

クッキー

[Cookies]タブをクリックして表示します。
送信されたクッキーが表示されます。

Cookies画面

WebSocketフレーム

[Frames]タブをクリックして表示します。
WebSocketコネクションで通信したメッセージが表示されます。

Framesタブは、WebSocketコネクションで開始したリソースだけに表示されます。

タイミングデータ

[Timing]タブをクリックして表示します。
リソースをローディングしたときの時間を表示しますが、Timelineビューでバーの上にマウスカーソルをのせたときに表示されるデータと同じです。

Timing画面

表示されるデータの意味は以下になります。

プロパティ 説明
Proxy Proxyサーバとの接続に費やされた時間
DNS Lookup DNSルックアップに費やされた時間
Blocking 既に確立された接続が再利用可能になるのを待つために費やされた時間
Connecting 接続を確立するのに費やされた時間
Sending リクエストを送るのに費やされた時間
Waiting 最初のレスポンスが返ってくるまでの待機時間
Receiving レスポンスデータを受信している時間

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ