HARファイルとは？

HAR（HTTP Archive）ファイルは、Webページで発生したネットワーク要求と応答を記録するJSON形式のファイルで、Webパフォーマンスの問題を分析またはデバッグするための便利なツールです。このファイルには、ページのロード時間、リソースのロード、リクエスト、レスポンスヘッダなど、すべてのHTTPトランザクションに関する詳細情報が含まれています。

HARファイルの活用法

HARファイルを開発チームに提供すると、 問題の原因をすばやく特定して解決できます。たとえば、ページの読み込み速度や特定の要求で発生した遅延時間を簡単に確認でき、パフォーマンスの問題やネットワークトラフィックの問題をより迅速かつ正確に分析できます。

HARファイルの記録方法

（*使用するブラウザをクリックしてその方法に進みます）

1. Google Chrome

2. Mozilla Firefox

3. Microsoft Edge

4. Safari

5. Whale

1. Google ChromeでHARファイルを記録する

1. 開発者ツールを開く

   • ブラウザの右上にある 3点メニュー > ツールをさらに表示 > 開発者ツールをクリックするか、
   • F12 キーを押して開発者ツールを開きます。
     
     

2. ネットワークタブを選択
   

   開発者ツールで、 ネットワーク ]タブをクリックします。
   • 録画ボタンが赤で表示されていることを確認してください。
   • Preserve log チェックボックスがチェックされていることを確認します。
     
     
     
     

3. ネットワークアイテムの消去と更新
   

   クリーンなネットワークログをキャプチャするために記録されたログエントリを消去し、ページを更新します。
   
   • ⊘ボタンをクリックするか、 Ctrl + L （Windows）または Cmd + K （Mac）をクリックします。
   • Ctrl+R (Windows)または Cmd+R (Mac)を押してページを更新します。
     
     
     

4. HARファイルの保存

   エラーが発生した部分を再現した後にネットワーク要求が記録されたら、 ネットワーク ]タブ内の右上隅の📥 アイコンをクリックしてHARファイルを保存します。
   
   

2. Mozilla FirefoxでHARファイルを記録する

1. 開発者ツールを開く

   • ブラウザの右上隅にある 3点メニュー > ツールをさらに表示 > 開発者ツールをクリックするか、
   • F12 キーを押して開発者ツールを開きます。
     
     

2. ネットワークタブを選択
   

   開発者ツールで、 ネットワーク ]タブをクリックします。
   
   
   
   

3. ネットワークアイテムの消去と更新
   

   クリーンなネットワークログをキャプチャするために記録されたログエントリを消去し、ページを更新します。
   
   • 🗑️ボタンをクリックするか、 Ctrl + L （Windows）または Cmd + K （Mac）をクリックします。
   • Ctrl+R (Windows) または Cmd+R (Mac) を押してページを更新します。
     
     
     
     

4. HARファイルの保存

   エラーが発生した部分を再現した後にネットワーク要求が記録されたら、 ネットワーク ]タブで右クリックして[ Save All As HAR ]を選択してファイルを保存します。
   
   

3. Microsoft EdgeでHARファイルを記録する

1. 開発者ツールを開く

   • ブラウザの右上隅にある 3点メニュー > ツールをさらに表示 > 開発者ツールをクリックするか、
   • F12 キーを押して開発者ツールを開きます。
     
     

2. ネットワークタブを選択
   

   開発者ツールで、 ネットワーク ]タブをクリックします。
   • 録画ボタンが赤で表示されていることを確認してください。
   • Preserve log チェックボックスがチェックされていることを確認します。
     
     
     
     

3. ネットワークアイテムの消去と更新
   

   クリーンなネットワークログをキャプチャするために記録されたログエントリを消去し、ページを更新します。
   
   • ⊘ボタンをクリックするか、 Ctrl + L （Windows）または Cmd + K （Mac）をクリックします。
   • Ctrl+R (Windows) または Cmd+R (Mac) を押してページを更新します。
     
     
     
     

4. HARファイルの保存

   エラーが発生した部分を再現した後にネットワーク要求が記録されたら、 ネットワーク ]タブの右上隅にある📥 アイコンをクリックしてHARファイルを保存します。
   
   
   
   
   

4. SafariでHARファイルを記録する

1. 開発者ツールを開く

   • Safariメニュー> 開発 > ウェブインスペクタを開くをクリックします。
     （開発者ツールが表示されない場合は、Safari設定で開発者ツールを有効にするオプションをチェックする必要があります。）
     
     

2. ネットワークタブの選択

   デベロッパーツールでネットワーク ]タブを選択します。
   
   
   
   

3. ネットワークアイテムの消去と更新

   クリーンなネットワークログをキャプチャするために記録されたログエントリを消去し、ページを更新します。
   
   • 🗑️ボタンをクリックするか、 Ctrl + L （Windows）または Cmd + K （Mac）をクリックします。
   • Ctrl+R (Windows)または Cmd+R (Mac)を押してページを更新します。
     
     
     
     

4. HARファイルの保存

   エラーが発生した部分を再現した後にネットワーク要求が記録されたら、 ネットワーク ]タブの右上隅にある[エクスポート]ボタンをクリックしてHARファイルを保存します。
   
   
   
   
   

4. WhaleでHARファイルを記録する

1. 開発者ツールを開く

   • ブラウザの右上隅にある 3点メニュー > ツールをさらに表示 > 開発者ツールをクリックするか、
   • F12 キーを押して開発者ツールを開きます。
     
     

2. ネットワークタブの選択

   開発者ツールで、 ネットワーク ]タブをクリックします。
   • 録画ボタンが赤で表示されていることを確認してください。
   • Preserve log チェックボックスがチェックされていることを確認します。
     
     

3. ネットワークアイテムの消去と更新
   

   クリーンなネットワークログをキャプチャするために記録されたログエントリを消去し、ページを更新します。
   
   • ⊘ボタンをクリックするか、 Ctrl + L （Windows）または Cmd + K （Mac）をクリックします。
   • Ctrl+R (Windows) または Cmd+R (Mac) を押してページを更新します。
     
     

4. HARファイルの保存
   
   エラーが発生した部分を再現した後にネットワーク要求が記録されたら、 ネットワーク ]タブ内の右上隅にある📥 アイコンをクリックしてHARファイルを保存します。