通信内容をChromeで確認する。

詳しいことは

http://www.buildinsider.net/web/chromedevtools/01#page-4

に書かれていると思いますが、Chromeのnetworkで通信内容を確認する事ができます。

  • [Status]列: HTTPステータス。
  • 2[Initiator]列: ファイルを呼び出す起点。例えばJavaScriptコードから読み込まれたときには、そのJavaScriptファイル名が表示される。
  • 3[Time]列: ダウンロードにかかった時間。上がリクエストから受信が完了するまでの時間。下がリクエストから受信開始するまでの時間。
  • 4[ログの保持]: ページを遷移してもログを残しておくように設定する。
  • 5フィルター: リクエストの種類をフィルターして特定の項目だけの表示に切り替えられる。ちなみに「XHR」は「XMLHttpRequest」の略だ。

これらが確認できるため、デバッグを行う上で役に立ちます。また、各通信にかかった時間も表示されているため、どの通信で時間がかかり重くなっているのかも確認することが出来ます。