HARファイルを作成する

  • 更新

お客様環境でのみ発生し、弊社環境で再現できない事象が発生した場合、原因を調査するため、追加の情報として HARファイルのご提供をお願いすることがあります。

HAR ファイルは、ネットワークリクエスト、すなわちブラウザと Webサイト間の情報を追跡し、パフォーマンスの問題やページの表示に関する問題を特定するのに役立ちます。

ここでは、以下のブラウザでのHARファイルを生成する方法についてご説明します。

Google Chrome,Apple Safari,Mozilla Firefox,Microsoft Edge,Opera

保存したHARファイルは弊社サポートまでご送付ください。

問題ごとに別々のHARファイルを作成することをお勧めします。

HARファイルは、シークレットウィンドウ(またはプライベートウィンドウ)で取得することをお勧めします。シークレットウィンドウやプライベートウィンドウを使用して、過去の情報を含まない状態で取得することにより、可能な限りWEBページのコンテンツやCookie等の機密情報を含まないファイルとして作成できます。プライバシーポリシー等、お客様データに関するデータの取り扱いにつきましては、セキュリティーとプライバシーをご覧ください。

Google Chrome:

1.問題が発生しているページに移動します。

2.右上隅のブラウザの3点ボタン>その他のツール>「デベロッパーツール」を選択するか、F12キーを押下します。

3.開いたパネルの「ネットワーク(Network)」タブを選択します。

4.「ログを保持(Preserve log)」チェックボックスに✔します。

5.タブの左上隅にある「ネットワークログの記録(Record)」ボタンが赤くなっていることを確認します。 灰色の場合は、ボタンをクリックして録音を開始します。

6.「消去(Clear)」ボタンを選択して、既存のログをクリアします。

7.画面を再読み込み(F5)して問題を再現します。

8.読み込みが完了したら、「HARをエクスポート」でファイルをローカルPCに保存します。

HAR____1.png

Apple Safari:

HARファイルを生成する前に、Safari の 開発メニューが表示されていることを確認してください。表示されていない場合はこちらの「MacのSafariで「開発」メニューのデベロッパツールを使用する」の手順に従って開発メニューを表示します。

1.開発メニューから「Webインスペクタを表示(Show Web Inspector)」を選択します。

2.「ネットワーク(Network)」タブを選択します。

3.「Clear Network Items(ネットワーク項目のクリア)」 を選択して既存のログを削除します。

4.画面を再読み込みして問題を再現します。Safari では自動でネットワーク要求の記録を開始します。

5.問題が再現されたら「エクスポート」アイコンを選択して、ファイルをローカルPCに保存します。

HAR____2.png

Mozilla Firefox:

1.Firefoxを開き、問題が発生しているページに移動します。

2.右上の3本線のメニュー>「Web Developer(ウェブ開発)」>「Toggle Tools(ツールの切り替え)」を選択するか、F12キーを押下します。

3.「Network」タブを選択します。

4.「Clear(消去)」を選択して既存のログを削除します。

5.画面を再読み込みして問題を再現します。

6.問題が再現されたら「HAR Export/Import(HAR のエクスポートまたはインポート)」>「Save All As HAR(すべてを HAR として保存)」を選択して、ファイルをローカルPCに保存します。

HAR____3.png

Microsoft Edge:

1.問題が発生しているページに移動します。

2.右上隅のブラウザの3点ボタン>その他のツール>「デベロッパーツール」を選択するか、F12キーを押下します。

3.開いたパネルの「ネットワーク(Network)」タブを選択します。

4.「ログを保持(Preserve log)」チェックボックスに✔します。

5.タブの左上隅にある「ネットワークログの記録(Record)」ボタンが赤くなっていることを確認します。 灰色の場合は、ボタンをクリックして録音を開始します。

6.「消去(Clear)」ボタンを選択して、既存のログをクリアします。

7.画面を再読み込み(F5)して問題を再現します。

8.読み込みが完了したら、「HARをエクスポート」でファイルをローカルPCに保存します。

HAR____4.png

Opera:

1.問題が発生しているページに移動します。

2.ブラウザウィンドウの左上にある Opera メニューアイコン(opera-menu.png)Developer > Developer Tools を選択するか、 F12 ボタンを押下します。

3.「Network」タブを選択します。

4.「Preserve log(ログを保持)」チェックボックスに✔します。

5.「Network」タブの左上に、赤い丸(HAR____5.png)が表示されたことを確認します。これはキャプチャが開始されたことを意味します。円が黒い(HAR____6.png)になっている場合はクリックして、ブラウザの記録を開始します。

6.画面を再読み込みして問題を再現します。

7.読み込みが完了したら、「Export HAR HAR____7.png」 でファイルをローカルPCに保存します。