HAR Viewer

使い方

1. Chrome、Firefox、Edge、Safari の DevTools から書き出した .har ファイルを選ぶか、HAR JSON を入力欄に貼り付けます。
2. Analyze を押します。ファイルはページ内の FileReader で読まれるため、録画が端末の外に出ることはありません。
3. サマリーを読みます。リクエスト数、ホスト数、実時間のスパン、所要時間の合計、中央値、転送バイト数、エラー数が並びます。
4. waterfall で隙間を探します。バーは各リクエストの開始オフセットから応答完了までを表すため、「時間がかかった」と「開始が遅かった」の両方が見えます。
5. 外れ値でまとめたいときは並び替えを所要時間またはサイズに切り替えます。

よくある用途

• 遅い呼び出しの特定 —— 所要時間で並べ替え、数百行を読む前に上位 5 件を確認する。
• ページが実際に読むものの確認 —— 書き出した HAR にはリダイレクト、プリロード、失敗したアセットまですべて載っています。
• キャッシュ動作の検証 —— 304 応答はサイズが小さくバーも短いので、図の上で目立ちます。
• 再現の共有 —— 同僚のブラウザで書き出した HAR を、ツールを導入せずにここで確認できます。
• ペイロード問題の切り分け —— サイズで並べ替えれば、転送量の大半を占める応答がすぐ分かります。

よくある質問

Q: データはアップロードされますか？ A: いいえ。HAR 録画には Cookie、Authorization ヘッダー、セッション URL、場合によっては応答ボディまで含まれます。このツールは FileReader でメモリに読み込み JSON.parse で解析するだけで、fetch もアップロードもコンテンツの解析送信もありません。本番セッションの録画もここで開けます。

Q: HAR のどのフィールドを読みますか？ A: log.entries の request.url、request.method、response.status、response.bodySize、response.headersSize、entry.time、entry.startedDateTime です。_transferSize があればそちらを優先します。圧縮転送ではこちらの方が正確だからです。

Q: 転送量の合計が不完全と表示されるのは？ A: 一部の書き出しツールは bodySize や headersSize に -1 を書きます。それらのエントリも件数には数えますが、バイト合計からは除外し、サマリーにサイズを報告した件数を明示します。

Q: リクエスト/レスポンスボディは解析されますか？ A: いいえ。読むのは所要時間・ステータス・サイズといったメタデータだけです。ボディはメモリ内のオブジェクトに残るだけで画面には描画しないため、ペイロード内の秘密が表示されることはありません。