メインコンテンツまでスキップ

HARファイルの作り方を教えてください

HARファイルについて

表示が遅い等のブラウザ由来の問題が発生しているときに作成したHARファイルを調べることで、問題発生時にブラウザが生成したネットワークリクエストに関する詳細情報を確認できます。

HARファイルの作り方

Chrome

  1. Google Chromeを開き、問題が発生しているページにアクセスする
  2. Chromeのメニューバー(要素を検証)から「表示」->「デベロッパー」->「デベロッパーツール(開発ツール)」を選択する
  3. 画面下部に表示されたパネルで、「Network」タブを選択する
  4. 左上端にある丸いRecordボタンを探し、ボタンが赤くなっていることを確認する
    注意) ボタンが灰色になっている場合は、1回クリックすると赤くなります
  5. チェックボックス「Preserve log」にチェックを入れる
  6. Clearボタン(斜線が入った丸)をクリックして、既存のログをすべて消去する
  7. 発生した問題を再現する
  8. 問題が再現できたら、[Network] パネルの上部にあるアクションバーで、[download Export HAR (sanitized)...] をクリックし、HAR ファイルを保存する

Image (fetched from Gyazo)

ヒント

さらに詳しい操作方法は、Chromeの公式ドキュメントをご覧ください。

Firefox

  1. Firefoxで、問題が発生しているページを表示する
  2. ウィンドウ右上にあるFirefoxメニュー(3本の平行線)を選択し、「ウェブ開発」->「ウェブ開発ツール」を選択する
  3. 画面下部に表示されたパネルで、「ネットワーク」タブをクリックして、問題の動作を再現する
    注意) 記録は自動的に開始するので、ブラウザで実行してください
  4. すべてのアクションが開発者ネットワークパネルで生成されたことを確認したら、ネットワークパネル「ファイル」列の下の任意の場所を右クリックして、「HAR形式で全て保存」をクリックする
    Image (fetched from Gyazo)
ヒント

さらに詳しい操作方法は、Firefoxのソースドキュメントをご覧ください。

Microsoft Edge

  1. Microsoft Edgeで、問題が発生しているページを表示する
  2. ページ上で右クリックし、ドロップダウンメニューから「開発者ツールで調査する」を選択する
  3. 表示されたパネルの「Network (ネットワーク)」タブをクリックする
  4. 左上にある丸い「記録(Record)」ボタンを探し、それが赤色であることを確認する
    ボタンが灰色の場合は、一度クリックすると赤色になります
  5. チェックボックス「Preserve log」にチェックを入れる
  6. Clearボタン(斜線が入った丸)をクリックして、既存のログをすべて消去する
  7. 発生した問題を再現する
  8. 問題が再現できたら、[Network] パネルの上部にあるアクションバーで、[download Export HAR (sanitized)...] をクリックし、HAR ファイルを保存する
    Image (fetched from Gyazo)
ヒント

さらに詳しい操作方法は、Microsoft Edgeの公式ドキュメントをご覧ください。

注意事項

  • ブラウザの項目名やボタンの位置は、ブラウザ側の仕様変更で本FAQの内容と異なる場合があります。 
  • その他のブラウザでの生成方法は、「ブラウザ名 HARファイル 作り方」などのワードで検索エンジンにてご確認ください。
  • HARファイルには、個人情報データが含まれます。
  • Kurocoサポートへのお問い合わせの際は、HARファイルを添付してサポートまでお送りください。

サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。