ワンショット

HAR Compare Prototype

Before / After の HAR を比較し、通信量、リクエスト数、処理工程、外部ドメインの増減を見ます。

サンプルHARで動作確認

まずはサンプルをダウンロードして、Before / After に読み込むと比較結果の見え方を確認できます。手早く見るだけならサンプル比較ボタンを使えます。

BeforeサンプルDL AfterサンプルDL

HARファイルについて

形式と作り方

ファイル形式

  • 拡張子は .har または .json
  • 中身は JSON 形式の HTTP Archive
  • log.entries に通信リクエストが並びます

Chromeでの保存

  1. DevTools を開く
  2. Network タブを開く
  3. 対象ページを再読み込み
  4. 一覧を右クリック
  5. Save all as HAR with content を選ぶ

この画面で見る項目

  • 総通信量、リクエスト数、待ち時間
  • 4xx / 5xx のエラー件数
  • HTML / CSS / JS / Image / Font 別の重さ
  • 外部ドメインと重いリソース