(2022.03.06 追記)

Webアプリ化したので、以下のエントリご覧下さい。

Chromeのデベロッパーツールの情報からNetworkシーケンス図を作るツールを作った | takemikami.com
https://takemikami.com/2022/03/06/ChromeNetwork.html

(2022.03.06 追記 ここまで)


Webアプリケーションの開発や調査を行っている時、
GoogleChromeのデベロッパーツールでNetworkの状況を見ることが多いのですが、
ガントチャートではなく、シーケンス図で流れを追いたいことがあります。

リクエスト毎に確認しながらシーケンス図を書き起こすのも面倒なので、
機械的に作れないかを考えてみました。

考えた手順は、以下の通りです。

  • Chromeのデベロッパーツールからharファイルを取得する
  • harファイルをmarmeid形式のMarkdownに変換する
  • marmeidに対応したツールでMarkdownを表示する

Chromeのデベロッパーツールからharファイルを取得する

Chromeのデベロッパーツールで、調査したいNetworkを表示させます。
デベロッパーツールの以下のボタンから、harファイルを取得します。

harファイルの取得

harファイルをmarmeid形式のMarkdownに変換する

変換するスクリプトを用意します。
以下のPythonのスクリプトを適当な場所に保存します。

har2mermaid.py

import json
import urllib.parse
import sys
import re

if __name__ == "__main__":
    if len(sys.argv) < 2:
        print("usage: python3 har2mermaid.py harfile")
        exit(1)
    har_file = sys.argv[1]
    if har_file.endswith("\.har"):
        print("input file extension must be har.")
        exit(1)
    md_file = re.sub(".har$", ".md", har_file)

    with open(har_file, 'r') as f:
        harraw = f.read()

    harobj = json.loads(harraw)
    lines = [
        "```mermaid",
        "sequenceDiagram",
        "participant visitor as visitor",
    ]
    for h in set([urllib.parse.urlparse(r['request']['url']).netloc for r in harobj['log']['entries']]):
        lines.append("participant {} as {}".format(h.replace(".", "_"), h))
    for r in harobj['log']['entries']:
        hosturl = urllib.parse.urlparse(r['request']['url'])
        host_str = hosturl.netloc.replace(".", "_")
        request_str = hosturl.path[:50]
        response_str = "{} - {}".format(r['response']['status'], r['response']['content']['mimeType'])
        lines.append("    visitor ->>+ {}: {}".format(host_str, request_str))
        lines.append("    {} -->>- visitor: {}".format(host_str, response_str))
    lines.append("```")

    with open(md_file, 'w') as w:
        w.write('\n'.join(lines))

スクリプトとharファイルを適当な場所に保存して、
以下のコマンドを実行します。
# 以下は、www.google.comのharをexportした場合です。

python3 har2mermaid.py www.google.com.har

www.google.com.mdという名前のファイルが出来ればOKです。

marmeidに対応したツールでMarkdownを表示する

marmeidに対応したツールでMarkdownを表示します。
以下は、IntelliJ IDEAで表示した場合です。
# www.google.comのシーケンスです。

google.comのシーケンス

必要に応じてスクリプトを書き換えて、
着目したい情報をNoteなどに表示すると、調査しやすいと思います。

以上。