備忘録代わりに。

やったこと

• GoogleChrome のDevelopertoolにてNetworkログを監視
• ログをエクスポートする
• Rubyでhashにパースしてわかりやすいように。(selectとかで見たい項目だけgrepする)

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

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

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

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

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

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

DevToolで見れるログの問題点

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

私自身の問題点

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

助けて！Ruby!(こっから本題)

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

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

1. ログをエクスポート
2. ログファイルを読み込む
3. JSONにパース
4. hashにパース
5. Grep

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

1. ログをエクスポート

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

2. ログファイルを読み込む

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>

3. JSONにパース

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

4. hashにパース

2.4.2 (main)> log_hash=JSON.parse log_json

5. Grep

たとえばこんな感じかな

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

終わりに

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