Help us understand the problem. What is going on with this article?

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

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…

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away