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

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…