Chromeのデベロッパーツールの情報からNetworkシーケンス図を作るツールを作った
Webアプリケーションの開発や調査を行っている時、
GoogleChromeのデベロッパーツールでNetworkの状況を見ることが多いのですが、
ガントチャートではなく、シーケンス図で流れを追いたいこともあるので、
シーケンス図を作るツールを作ってみました。
har2mmd
https://takemikami.github.io/har2mmd/
har2mmd | GitHub
https://github.com/takemikami/har2mmd
このエントリでは、使い方の手順を説明します。
- Chromeのデベロッパーツールからharファイルを取得する
- harファイルを本ツールで表示する
Chromeのデベロッパーツールからharファイルを取得する
Chromeのデベロッパーツールで、調査したいNetworkを表示させます。
デベロッパーツールの以下のボタンから、harファイルを取得します。
harファイルを本ツールで表示する
ブラウザで、本ツール(har2mmd)を開きます。
har2mmd
https://takemikami.github.io/har2mmd/
「CHOOSE HAR FILE」ボタンで、先ほど取得したharファイルを指定します。
「Hosts」で、シーケンスに表示したいドメインを選択します。
たくさん選択すると、図が小さくなり過ぎるので、５つくらいまでが良いかと。
「Notes」で、表示したい情報を選択します。各設定の意味は以下の通りです。
- params: リクエストしたパラメータ
- send_cookies: 送信したCookie
- set_cookies: 設定を求められたCookie
- value: 上記のパラメータ・Cookieについて、キー名だけでなく値も表示
「VIEW NETWORK SEQUENCE DIAGRAM」ボタンで、シーケンス図を表示します。
google.comのharを表示した例。
Cookieを表示した例。
また、「Mermaid Code」アコーディオンを開くと、
marmeid形式のコードが表示されるので、
Markdown形式のドキュメントに貼り付けて利用出来ます。
以上。
