HARデータを収集する方法

Prev Next

概要

HARデータは、ウェブサイトおよびウェブページの接続性の問題をトラブルシューティングする際に非常に貴重なツールです。 ブラウザとサーバーの間の接続に関する貴重な洞察を提供し、可能性のある根本原因を識別するのに役立つ重要な情報を提供します。

この記事は、一般的に使用されるブラウザでHARデータをキャプチャする方法についての概要を提供します。

環境

Google Chrome

Mozilla Firefox

Microsoft Edge

Apple Safari

手順

このセクションでは、WindowsおよびMacで一般的に使用されるブラウザでHARデータをキャプチャする方法を紹介します。

Google Chrome:

  1. コンピュータでGoogle Chromeを開きます。

  2. HARデータをキャプチャしたいウェブページまたはウェブサイトにアクセスします。

  3. ページ上の任意の場所を右クリックし、コンテキストメニューから「インスペクト」を選択します。 または、キーボードショートカットCtrl + Shift + I(MacではCommand + Option + I)を使用することもできます。

  4. これにより、Chromeの開発者ツールパネルが開きます。 開発者ツール内の「ネットワーク」タブにいることを確認してください。

  5. 開発者ツールパネルの左上隅にある「記録」ボタン(小さな円)をクリックします。 赤くなり、ネットワークリクエストが記録されていることを示します。

  6. ウェブページと対話し、実行したいアクションを実行したり、キャプチャしたい接続性の問題を再現します。

  7. 問題が再現されたら、またはデータが集まったら、開発者ツールパネルで「停止」ボタン(小さな正方形)をクリックします。 ネットワーク活動の記録が停止します。

  8. ネットワークタブ内でキャプチャされたネットワークリクエストとデータを探索できます。 リクエストをフィルタリング、並べ替え、分析できます。

  9. キャプチャされたデータをHARファイルとして保存するには、ツールバーのダウンロードボタン(HARをエクスポート)をクリックします。 HARファイルを保存する適切な場所を選び、適切な名前を付けます。

Mozilla Firefox:

  1. コンピュータでMozilla Firefoxを開きます。

  2. HARデータをキャプチャしたいウェブページまたはウェブサイトにアクセスします。

  3. ページ上の任意の場所を右クリックし、コンテキストメニューから「要素を調査」を選択します。 または、キーボードショートカットCtrl + Shift + I(MacではCommand + Option + I)を使用することもできます。

  4. これにより、Firefoxの開発者ツールパネルが開きます。 開発者ツール内の「ネットワーク」タブを確認してください。

  5. 記録は自動的に開始されるべきです。

  6. ウェブページと対話し、実行したいアクションを実行したり、キャプチャしたい接続性の問題を再現します。

  7. 問題が再現されたら、またはデータが集まったら、ネットワークタブ内の任意の場所を右クリックし、「HARとしてすべて保存」を選択してデータをHARファイルとして保存します。 HARファイルを保存する適切な場所を選び、適切な名前を付けます。

Microsoft Edge:

  • コンピュータでMicrosoft Edgeを開きます。

  • HARデータをキャプチャしたいウェブページまたはウェブサイトにアクセスします。

  • ページ上の任意の場所を右クリックし、コンテキストメニューから「インスペクト」を選択します。 または、キーボードショートカットCtrl + Shift + I(MacではCommand + Option + I)を使用することもできます。

  • これにより、Microsoft Edgeの開発者ツールパネルが開きます。 開発者ツール内の「ネットワーク」タブを確認してください。

  • 開発者ツールパネルの左上隅にある「記録」ボタン(小さな円)をクリックします。 赤くなり、ネットワークリクエストが記録されていることを示します。

  • ウェブページと対話し、実行したいアクションを実行したり、キャプチャしたい接続性の問題を再現します。

  • 問題が再現されたら、またはデータが集まったら、開発者ツールパネルで「停止」ボタン(小さな正方形)をクリックします。 ネットワーク活動の記録が停止します。

  • ネットワークタブ内でキャプチャされたネットワークリクエストとデータを探索できます。 リクエストをフィルタリング、並べ替え、分析できます。

  • キャプチャされたデータをHARファイルとして保存するには、ネットワークタブ内の任意の場所を右クリックし、「コピー」オプションにカーソルを合わせ、「HAR(機密データ付き)としてすべてコピー」を選択します。 HARファイルを保存する適切な場所を選び、適切な名前を付けます。

Apple Safari:

  1. MacコンピュータでSafariを開きます。

  2. HARデータをキャプチャしたいウェブページまたはウェブサイトにアクセスします。

  3. Developメニューがまだ表示されていない場合は、SafariでDevelopメニューを有効にします。 これを行うには、Safari > 設定に移動します。 設定ウィンドウで「詳細」タブをクリックし、「メニューバーにDevelopメニューを表示」チェックボックスを選択します。
    developmenu.jpg

  4. Developメニューが有効になったら、メニューバーのDevelopメニューに移動し、「Webインスペクタを表示」を選択します。
    webinspector.jpg

  5. これにより、SafariのWebインスペクターパネルが開きます。 Webインスペクター内の「ネットワーク」タブを確認してください。

  6. ウェブページと対話し、実行したいアクションを実行したり、キャプチャしたい接続性の問題を再現します。

  7. ネットワークタブ内でキャプチャされたネットワークリクエストとデータを探索できます。 リクエストをフィルタリング、並べ替え、分析できます。

  8. キャプチャされたデータをHARファイルとして保存するには、名前の列の下で任意の場所を右クリックし、「HARをエクスポート」を選択します。HARファイルを保存する適切な場所を選び、適切な名前を付けます。