Chromeのデベロッパーツールの情報からNetworkシーケンス図を作る手順
(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ファイルを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
のシーケンスです。
必要に応じてスクリプトを書き換えて、
着目したい情報をNoteなどに表示すると、調査しやすいと思います。
以上。