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

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…