ちょっと便利なChromeの通信監視

この投稿は インタープリズムはAdvent Calendarを愛しています。世界中のだれよりも。 Advent Calendar 2017の8日目 の記事です。

今北産業。TL;DR

ブラウザでRequest,Responseの一覧を見たい時に便利なChromeの機能の紹介
アドオン不要なのでどの環境でも使える（Chromeが使えない環境は例外）
1行余った。

背景など

フロントエンドの開発をしていると、リクエスト・レスポンスの中身を覗いたりすることが頻繁にあります。
綺麗なREST APIを設計してあればリクエスト単位でテスト出来るので苦はないんですが、
Webサービスで「入力画面」「確認画面」「完了画面」の様に遷移していく画面の検証をしていると、
「あれ、確認から完了に遷移する時にエラーになった。。入力画面から確認画面に遷移する時のパラメータどうしてたっけ…」という場面がしばしばあります。
ログファイルに出力していたとしてもわざわざ別画面でターミナルを開いて…なんて面倒ですよね。
そんな時に嬉しいChromeの機能の紹介です。
とてもニッチですね。

chrome://net-internals/を使う

chromeのURLに下記を打ち込みます。

chrome://net-internals/

この様な画面が表示されます。

f:id:interprism:20171213221024p:plain

細かい説明は後でするので、まずはnet-internalsを開いた状態でWebサイトを開くとどうなるか見てみましょう。
当ブログのトップ（http://interprism.hatenablog.com/）を開くとこの様に表示されます。

f:id:interprism:20171213222938g:plain

この様に全ての通信内容が表示されます。

表示内容の説明

ID: 識別子
Source Type: 通信方法。URL_REQUESTやSOCKETなど。
Description: 通信内容の説明。URLやIPアドレスなど。

通信内容の見方

通信内容の見方です。
詳細を確認したい行をクリックすると右側に表示されます。

f:id:interprism:20171213232724p:plain

上の方はブラウザの拡張の表示などの情報が表示されています。
少し下の方にスクロールしていくとリクエストやレスポンスのヘッダ情報が表示されていますね。

t=223 [st=209] HTTP_TRANSACTION_SEND_REQUEST_HEADERS
--> GET / HTTP/1.1
Host: interprism.hatenablog.com
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cookie: [224 bytes were stripped]
t=224 [st=210] -HTTP_TRANSACTION_SEND_REQUEST
t=224 [st=210] +HTTP_TRANSACTION_READ_HEADERS [dt=176]
t=224 [st=210] HTTP_STREAM_PARSER_READ_HEADERS [dt=175]
t=399 [st=385] HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 200 OK
Server: nginx
Date: Wed, 13 Dec 2017 14:19:30 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Vary: User-Agent, X-Forwarded-Host
Access-Control-Allow-Origin: *
Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://blog.hatena.ne.jp/api/csp_report
P3P: CP="OTI CUR OUR BUS STA"
X-Cache-Only-Varnish: 1
X-Content-Type-Options: nosniff
X-Dispatch: Hatena::Epic::Blogs::Index#index
X-Frame-Options: DENY
X-Page-Cache: hit
X-Revision: 247e83b3e391be01ec97f0f9ce878d65
X-XSS-Protection: 1
X-Runtime: 0.013508
X-Varnish: 672049750
Age: 0
Via: 1.1 varnish-v4
X-Cache: MISS
Cache-Control: private
Content-Encoding: gzip