Harファイル徹底解説！

Webブラウザでサーバーとの通信内容を確認するには、開発者ツールの「ネットワーク」タブが便利です。しかし、リアルタイムでの確認は情報量が多く、じっくり分析するには効率が悪いことも。そんなときに役立つのが HARファイル（HTTP Archive）。通信の全履歴を1つのファイルに保存できるため、後から詳細に解析するのに最適です。この記事では、Microsoft EdgeでのHAR取得方法から、ファイル構造の読み解き方、分析ツールの活用までを徹底解説します。

Harの取得方法（Edge）の場合

① 開発者ツールを起動する

Edgeブラウザを開いた状態で、対象のページにアクセスします。
今回：https://kikuichige.com/
キーボードで F12 を押すか、右クリック → 開発者ツールで検証する

② センシティブデータの出力を許可する（Edge 130以降）

DevTools内で F1 キーを押して「設定」パネルを開きます。
「preferences」→「ネットワーク」→「Allow to generate HAR with sensitive data」にチェックを入れます。
- これにより、CookieやAuthorizationヘッダーなどもHARに含めることができます。

③ ネットワークタブを選択する

DevToolsの上部メニューから「Network」タブをクリックします。

④ ログを保持する設定にする

「Preserve log（ログを保持）」のチェックボックスにチェックを入れます。
- ページ遷移してもログが消えないようにするためです。

⑤ ネットワークログの記録を開始する

「●」アイコン（記録ボタン）が赤くなっていることを確認します。
- 赤くなっていない場合はクリックして記録を開始します。

⑥ ログをクリアする

記録開始前に「クリア」アイコン（ゴミ箱マーク）をクリックして、既存のログを削除します。

⑦ 事象を再現する

HARに記録したい操作（ページ遷移、ボタン操作など）を実行します。

⑧ HARファイルをエクスポートする

Edge 129以前の場合：
- 「Export HAR」アイコンをクリックして保存します。
Edge 130以降の場合：
- 「下矢印」アイコンを長押し → 「Export HAR (with sensitive data)」を選択します。

with sensitive data を選ぶには、DevToolsの設定で「Allow to generate HAR with sensitive data」にチェックを入れておく必要があります。

機密情報が含まれるため、共有時には必ず内容を確認し、不要な情報は削除するかsanitised版を使うのが安全です。

⑨ HARファイルを保存する

ファイル名を指定して .har 形式で保存します。

Harファイル例

実際に私のブログkikuichige.comにアクセスしたときのHarファイルの一部を載せておきます。
解説は、このファイルの各行を解説しています。

Harファイルの冒頭

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [
      {
        "startedDateTime": "2025-09-23T00:28:15.896Z",
        "id": "page_2",
        "title": "https://kikuichige.com/",
        "pageTimings": {
          "onContentLoad": 380.3450000123121,
          "onLoad": 693.399000010686
        }
      }
    ],
    "entries": [
      {
        "_connectionId": "442624",
        "_initiator": {
          "type": "other"
        },
        "_priority": "VeryHigh",
        "_resourceType": "document",
        "cache": {},
        "connection": "443",
        "pageref": "page_2",
        "request": {
          "method": "GET",
          "url": "https://kikuichige.com/",
          "httpVersion": "http/2.0",
          "headers": [
            {
              "name": ":authority",
              "value": "kikuichige.com"
            },
            {
              "name": ":method",
              "value": "GET"
            },
            {
              "name": ":path",
              "value": "/"
            },
            {
              "name": ":scheme",
              "value": "https"
            },
            {
              "name": "accept",
              "value": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"
            },
            {
              "name": "accept-encoding",
              "value": "gzip, deflate, br, zstd"
            },
            {
              "name": "accept-language",
              "value": "ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7"
            },
            {
              "name": "cache-control",
              "value": "no-cache"
            },
            {
              "name": "pragma",
              "value": "no-cache"
            },
            {
              "name": "priority",
              "value": "u=0, i"
            },
            {
              "name": "sec-ch-ua",
              "value": "\"Chromium\";v=\"140\", \"Not=A?Brand\";v=\"24\", \"Microsoft Edge\";v=\"140\""
            },
            {
              "name": "sec-ch-ua-mobile",
              "value": "?0"
            },
            {
              "name": "sec-ch-ua-platform",
              "value": "\"Windows\""
            },
            {
              "name": "sec-fetch-dest",
              "value": "document"
            },
            {
              "name": "sec-fetch-mode",
              "value": "navigate"
            },
            {
              "name": "sec-fetch-site",
              "value": "none"
            },
            {
              "name": "sec-fetch-user",
              "value": "?1"
            },
            {
              "name": "upgrade-insecure-requests",
              "value": "1"
            },
            {
              "name": "user-agent",
              "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0"
            }
          ],
          "queryString": [],
          "cookies": [],
          "headersSize": -1,
          "bodySize": 0
        },
        "response": {
          "status": 200,
          "statusText": "OK",
          "httpVersion": "http/2.0",
          "headers": [
            {
              "name": "cache-control",
              "value": "no-cache, must-revalidate, max-age=0, no-store, private"
            },
            {
              "name": "content-encoding",
              "value": "gzip"
            },
            {
              "name": "content-length",
              "value": "117788"
            },
            {
              "name": "content-type",
              "value": "text/html; charset=UTF-8"
            },
            {
              "name": "date",
              "value": "Tue, 23 Sep 2025 00:28:18 GMT"
            },
            {
              "name": "expires",
              "value": "Wed, 11 Jan 1984 05:00:00 GMT"
            },
            {
              "name": "link",
              "value": "<https://kikuichige.com/wp-json/>; rel=\"https://api.w.org/\""
            },
            {
              "name": "server",
              "value": "nginx"
            },
            {
              "name": "strict-transport-security",
              "value": "max-age=2592000"
            },
            {
              "name": "vary",
              "value": "Accept-Encoding, Cookie"
            },
            {
              "name": "x-content-type-options",
              "value": "nosniff"
            },
            {
              "name": "x-frame-options",
              "value": "SAMEORIGIN"
            },
            {
              "name": "x-powered-by",
              "value": "PHP/8.3.23"
            }
          ],
          "cookies": [],
          "content": {
            "size": 895960,
            "mimeType": "text/html",
            "text": 内容省略",
            "encoding": "base64"
          },
          "redirectURL": "",
          "headersSize": -1,
          "bodySize": -1,
          "_transferSize": 118273,
          "_error": null,
          "_fetchedViaServiceWorker": false
        },
        "serverIPAddress": "160.251.123.101",
        "startedDateTime": "2025-09-23T00:28:15.893Z",
        "time": 52.98200002289377,
        "timings": {
          "blocked": 5.43400001296401,
          "dns": -1,
          "ssl": -1,
          "connect": -1,
          "send": 0.4410000000000003,
          "wait": 25.228000002754854,
          "receive": 21.87900000717491,
          "_blocked_queueing": 2.2950000129640102,
          "_workerStart": -1,
          "_workerReady": -1,
          "_workerFetchStart": -1,
          "_workerRespondWithSettled": -1
        }
      },

解説

上記のファイルを解説していきます。

全体構造

log: HARファイル全体のルートオブジェクトです。
- version: HARの仕様バージョン（1.2）を示します。
- creator: このHARファイルを生成したツール（WebInspector 537.36）の情報です。
- pages: 読み込まれたページのリストです。
  - startedDateTime: ページの読み込みが開始された日時（UTC）です。
  - id: ページの一意な識別子（page_2）です。
  - title: ページのタイトル (https://kikuichige.com/) です。
  - pageTimings: ページの読み込みイベントに関する時間情報です。
    - onContentLoad: DOMContentLoadedイベントが発火するまでの時間（380.345ミリ秒）です。
      補足：DOMContentLoaded は、HTML文書の構造（DOM）が完全に読み込まれた時点で発火するイベントです。つまり、JavaScriptやCSSなどの外部リソースの読み込みが完了していなくても、HTMLの構造が整った瞬間に発火します。
    - onLoad: ページのすべてのリソースの読み込みが完了した時点（loadイベント）までの時間（693.399ミリ秒）です。
- entries: 記録されたすべてのHTTPリクエストとレスポンスのリストです。ここでは1つのエントリーのみ示します。

entries 配列内の詳細

このエントリー（上記Harファイル例）は、https://kikuichige.com/ のHTMLドキュメントそのものを取得するための最初のリクエストです。

_resourceType: リソースの種類が「document」であることを示します。
connection: 使用されたTCPコネクションのID（443）です。
pageref: このリクエストが属するページのID（page_2）です。
補足：HARでは、ブラウザが「新たにページを読み込んだ」と認識したタイミングで pages に1件追加されます。リロード（再読み込み）は、現在のURLを再度読み込む操作なので、内部的には新しいページ読み込みと同じ扱いになります。今回、kikuichige.comを開いた状態でリロードしたからpage2になっている。

request オブジェクト（ブラウザからサーバーへのリクエスト情報）

method: HTTPリクエストのメソッドが「GET」であることを示します。
url: リクエスト先のURL (https://kikuichige.com/) です。
httpVersion: 使用されたHTTPのバージョンが「http/2.0」です。
headers: リクエストに含まれるヘッダーのリストです。主なものを解説します。
- :authority: 接続先のホスト名 (kikuichige.com) です。
- :path: リクエストされたパス (/) です。
- accept: ブラウザが受信可能なコンテンツタイプを指定します。
  補足：Accept ヘッダーの q パラメータは、クライアント（ブラウザ）がどのMIMEタイプをどれくらいの優先度で受け入れるかをサーバーに伝えるものです。サーバー側が「複数の形式でレスポンスを返せる」場合に、どれを選ぶかの判断材料として使われます。q=1.0 が最高優先度（省略時は1.0とみなされる）
- accept-language: ブラウザが優先する言語（日本語、英語など）を指定します。
- cache-control と pragma: キャッシュを利用しないようにサーバーに指示します (no-cache) 。
- priority: リクエストの優先度を示します。
  補足：
  u=0（Urgency）
  緊急度を示す値で、0が最も高い優先度。例えば、HTMLドキュメント本体や初期レンダリングに必要なCSSなどは u=0 に設定されることが多いです。逆に画像やフォントなどは u=3〜u=7 など、低めに設定されることがあります。
  i（Incremental）
  逐次読み込みを許可するかどうかを示します。i があると、サーバーはレスポンスの一部が届いた時点でクライアントが処理を始めることを期待します。
- sec-ch-ua: ブラウザの種類とバージョンをサーバーに伝えます（Chromium, Microsoft Edgeなど）。
- sec-ch-ua-mobile: モバイルデバイスからのアクセスでないことを示します (?0)。
- sec-fetch-dest: リクエストの目的がHTMLドキュメントの取得であることを示します (document)。
- sec-fetch-site: どこからも参照されずに直接アクセスされたことを示します (none) 。
- upgrade-insecure-requests: HTTPをHTTPSにアップグレードするようサーバーに要求します。
- user-agent: ブラウザやOSの情報を含むユーザーエージェント文字列です。
- queryString: クエリパラメータ（URLの ? 以降の部分）の一覧です。空配列 []は、このリクエストにはクエリパラメータが含まれていないことを示しています。例：https://example.com/?id=123 の場合は [{name: "id", value: "123"}] のような形式になります。
- cookies:リクエストに含まれる Cookie の一覧です。空配列 []は、このリクエストには Cookie が送信されていないことを示しています。Cookieがある場合は、[{name: "session_id", value: "abc123"}] のように記録されます。
- headersSize:リクエストヘッダー全体のサイズ（バイト単位）です。-1 は「サイズが不明」または「計測されていない」ことを意味します。HAR生成ツールやブラウザの仕様によっては、サイズを記録しないことがあります。通常は 200 や 512 などの数値が入ります。
- bodySize:リクエストボディのサイズ（バイト単位）です。0 は、リクエストにボディが存在しない（空）ことを示します。

response オブジェクト（サーバーからブラウザへのレスポンス情報）

status: HTTPステータスコードです。「200」は（成功）であることを示します。
statusText: ステータスコードの説明が「OK」であることを示します。
headers: レスポンスに含まれるヘッダーのリストです。
- content-encoding: レスポンスボディが「gzip」形式で圧縮されていることを示します。
- content-length: レスポンスボディのサイズが117788バイトであることを示します。
- content-type: コンテンツの種類がHTMLで、文字コードがUTF-8であることを示します。
- expires: キャッシュの有効期限が過去の日時であり、キャッシュしないよう指示しています。
- link: WordPressのAPIエンドポイントの場所を示しています。
  補足：（rel）例：rel="https://api.w.org/"は、
  このリンクが「WordPress APIに関連するリソース」であることを示す関係性
- strict-transport-security: HTTPSでの接続を強制する期間をブラウザに伝えます。
- Vary：キャッシュのバリエーション（分岐条件）を指定するためのヘッダーです。つまり、「どのリクエストヘッダーの違いによって、レスポンス内容が変わる可能性があるか」をサーバーが明示します。例2：Cookieログインしているユーザーと未ログインユーザーで、同じページでも表示内容が異なる場合→ Cookieの違いによってレスポンスが変わるため、ユーザーごとにキャッシュを分ける必要がある。
- x-content-type-options: ブラウザによるMIMEタイプの推測を無効にします (nosniff)。
- X-Frame-Options:このヘッダーは、Webページが <iframe> や <frame> タグで他のサイトに埋め込まれることを制御するためのものです。SAMEORIGINこの指定は、同一オリジン（＝同じドメイン）からの埋め込みのみを許可するという意味です。
- x-powered-by: サーバーサイドで利用されている技術がPHP/8.3.23であることを示します。
content: レスポンスボディの詳細です。
- text: 実際のHTMLコンテンツですが、ここでは省略されています。

通信情報と時間

serverIPAddress: 接続したサーバーのIPアドレスです。

⏱ time の定義

HARの entries に含まれる time は、以下のように計算されます：

time = blocked + dns + connect + ssl + send + wait + receive

ただし、各項目が -1 の場合は「未計測」または「該当なし」として除外されます。

各フェーズの意味

項目	説明
`blocked`	リクエストが待機キューに入っていた時間（接続制限など）
`dns`	DNSルックアップにかかった時間
`connect`	TCP接続の確立にかかった時間
`ssl`	TLS/SSLハンドシェイクにかかった時間（HTTPSのみ）
`send`	リクエストデータの送信にかかった時間
`wait`	サーバーからの最初のバイトを待つ時間（TTFB）
`receive`	レスポンスデータの受信にかかった時間

例：time: 52.982

        "timings": {
          "blocked": 5.43400001296401,
          "dns": -1,
          "ssl": -1,
          "connect": -1,
          "send": 0.4410000000000003,
          "wait": 25.228000002754854,
          "receive": 21.87900000717491,

この場合、time = 5.434 + 0 + 0 + 0 + 0.44 + 25.228 + 21.879 = ms
→ DNSや接続は再利用されているため -1（未計測）となり、合計時間には含まれません。

実用的な活用ポイント

活用	意味
パフォーマンス分析	`wait` が長いとサーバー側の処理遅延、`receive` が長いとレスポンスサイズが大きい可能性あり
ボトルネック特定	`dns` や `connect` が長い場合はネットワークや名前解決の問題を疑う
キャッシュ挙動の検証	`dns` や `ssl` が `-1` なら、接続が再利用されている可能性あり（Keep-Alive）

timings: リクエストからレスポンスまでの各段階にかかった時間の内訳です。
- wait: リクエストを送信してから最初の1バイトをサーバーから受信するまでの待機時間（TTFB）が25.228ミリ秒だったことを示します。
- receive: レスポンスデータの受信にかかった時間が21.879ミリ秒だったことを示します。

Google Admin Toolbox HAR Analyzerの使い方

Google Admin Toolbox HAR Analyzerは、HARファイル（HTTP Archive）をアップロードして、Web通信の詳細を視覚的に分析できる無料ツールです。

HAR Analyzer にアクセスする

上記のリンクから Google Admin Toolbox HAR Analyzer にアクセスします。
ページは非常にシンプルで、ファイル選択ボタンが表示されます。

HARファイルをアップロードする

Harファイルは機密情報が含まれるため、必ず内容を確認し、不要な情報は削除するかsanitised版を使うのが安全です。

「Choose file」ボタンをクリックして、取得した .har ファイルを選択します。
アップロードすると、リクエストごとの詳細が一覧表示されます。

各リクエストを分析する

表示される情報には以下のような項目があります：

項目	内容
URL	リクエスト先のURL
ステータスコード	200, 404, 500などのHTTP応答
MIMEタイプ	HTML, CSS, JS, JSONなど
時間	リクエストにかかった合計時間（ms）
タイミング内訳	`blocked`, `dns`, `connect`, `wait`, `receive` などの詳細時間

クリックすると、各リクエストのヘッダー・ボディ・タイミング情報が展開されます。

問題のあるリクエストを特定する

ステータスコードが 4xx や 5xx のものを探す
時間が極端に長いリクエストをチェックする
CookieやAuthorizationヘッダーの有無を確認する

💡活用シーン

シーン	活用方法
ページ表示が遅い	`wait` や `receive` が長いリクエストを特定
通信エラーの調査	403, 404, 500などのステータスコードを抽出
WAFログとの照合	特定のリクエストヘッダーやCookieの挙動を確認
API通信の検証	JSONレスポンスやPOSTデータの内容を確認

HAR Analyzerとタイミング表示について

HAR Analyzerの合計時間が”time”: 例52.98200002289377,に対応し
タイミングが、”timings”: {}に対応しています。
タイミングの図の見方は、合計時間”time”が全体の幅で、”timings”の中身が色分け表示されます。色分けは、AIに聞くと全然違う色をいうので、”timings”: {}の中身を見て判断したほうがいいです。

所感

Harのいいところは、開発者ツールのネットワークタブでは見にくいので、全部の情報をファイルにできることが便利です。
HAR Analyzerは、合計時間でソートするぐらいしか使い道がない気がします。Harを直接VSCodeで見た方が、いろいろ調べやすいかもしれません。

この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。

MENTAやってます（ichige）