Edited at

サイトのリクエスト情報をエクセルで見れるようにする

More than 5 years have passed since last update.

Chromeのデベロッパーツールの「Network」タブ。

Web制作している時は、基本的に開きっぱなしにしているが、この情報をきちんと集計して、エクセルかなにかでドキュメントにしたい。

( 他のブラウザの事は知らぬ )


1.データの保存


  • ネットワクークタブで右クリック

  • メニューから「Save All As HAR」

とすると、HARファイルという形式で保存できる。

( ちなみにこのファイルの表示だけならこんなサイトもある )


2.ファイルの確認

このファイルをテキストエディタで開くと、中身はJSONのようなので、これを適当に整形するプログラムを書く。


sample.har

{

"log": {
"version": "1.2",
"creator": {
"name": "WebInspector",
"version": "537.1"
},
"pages": [
{
// ...
}
],
"entries": [
{
"startedDateTime": "2012-08-….",
"time": 24,
"request": {
// ...
}
},
{
// ...
}
}


3.整形するプログラム

JSONが解析できれば何でも良いのですが、今回はJavaScriptでTSVにでも変換。


parser.js

/**

* harファイルのパースと tsv出力
*/

var global = this,
stdin;

// stdin
stdin = (function () {

var line = "",
stdin = "";

while (line = global.readline()) {
stdin += line;
}

return stdin;
}());

// main
(function (instr) {

var SEPARATOR = "\t",
root = JSON.parse(instr).log,
entries = root.entries,
entry,
bodySize = 0,
status200 = 0,
status304 = 0,
status_other = 0,
i;

for (i = 0; i < entries.length; i++) {
entry = entries[i];
bodySize += entry.response.bodySize;

if(entry.response.status == 200){
status200++;
}else if(entry.response.status == 304){
status304++;
}else{
status_other++;
}
}

pageTimings = root.pages[0].pageTimings;

global.print([
entries.length,
status200,
status304,
status_other,
bodySize,
pageTimings.onContentLoad,
pageTimings.onLoad
].join(SEPARATOR));

}(stdin));


これを実行して、さっきのHARファイルを読ませる

$ /path/to/jsc parsehar.js < sample.har 

94 70 0 24 1600953 703 4653

後は、要件に合わせて出力する項目を修正したり、複数ファイルをまとめて処理できるようにしたり etc…