備忘録代わりに。

やったこと

GoogleChromeのDeveloper toolで見れるネットワークログって？

スクリーンショットはこんな感じ。
Command + Option + I こんなショートカットで開けます。

[Console]や、[Elements]のところは使ったことあるけど、その他はない、という方も案外いるのでは。

[Network]の画面はこんな感じです。

単純にQiitaのページを読み込んでいるだけでこんなに通信が走っているのですね...
それぞれのリクエスト、レスポンス等はもちろんのこと、通信にかかった時間もいい感じにビジュアライズされて良いですね。

読み込みが遅い時に、なにがボトルネックになってるのか一目瞭然、という感じです。

Grep力が弱い
自社サービスとかであれば、Webサーバーとかアプリケーションサーバーのログを直接見れば良いのですが、
他社のサイトを「どうやってるんだろう」という好奇心でログを見たい場合は少し見づらいです。

ログ解析とかのツールに慣れているわけでもない
悲しいかな。ド素人です。
そんなにリッチなツールは使えません...

大層な分析をしたいわけでもないので、愛しのRubyに頼ることにしました。

以下の手順で進めていきます。

さっそくはじめましょう。

Networkログ画面で右クリック ➝ [Save as HAR with content]をクリック。
これでダウンロードされます。

https://github.com/jarib/har
こちらのgemを使いました。

$ gem install har
$ pry
2.4.2 (main)> log=HAR::Archive.from_file('/path/to/har/file')
=> #<HAR::Archive:0x3a7781d00dea492a>

2.4.2 (main)> log_json=log.to_json
=> jsonがわらわらでてくる

2.4.2 (main)> log_hash=JSON.parse log_json

たとえばこんな感じかな

2.4.2 (main)>  grepped_log=log_hash['key1'].select { |ele| ele.include?('keyword') }

これで色々ログを見れそうだ〜！