Harファイルとは？
Http ARchiveの略称です。Webブラウザのサイトとのやりとりを記録するためのJSON形式のアーカイブファイルになります。
このファイルがあると、パフォーマンスやコンポーネントのエラー等、フロントエンド側でのトラブルシューティングに役立ちます。
弊社サポートサービスでも時々取得をお願いすることがあります。
今回は、その取得方法をご案内します。
| 目次 |
取得方法
ブラウザによって取得方法が異なります。ここでは、Chrome、Edge、Firefox、Safariのやり方をご紹介します。
Chrome
問題が発生するページを表示した状態で、ブラウザ右上にある3点マークのアイコンをクリックし、メニューを表示します。
その他のツール > デベロッパーツールをクリックします。
デベロッパーツールが展開されます。
メニューから「ネットワーク」タブをクリックします。（表示されていない場合は、 >> アイコンをクリックすると表示されます）
ネットワークタブ内にある●ボタンが下図のように赤くなっていることを確かめます。ボタンが灰色になっている場合は、クリックして記録を開始します。
また「ログを保持」のチェックボックスにチェックが入っていなかった場合は、チェックを入れてください。
操作する前に、●の隣にある駐車禁止マークのようなアイコン（○の中に斜め線が入っているもの）をクリックしてください。これは、ログをクリアするボタンです。
この状態で、問題が発生する操作を実施します。すると、ネットワークリクエストが記録されていきます。
問題が再現する操作まで実施したら、ネットワークタブ内にある⬇アイコンをクリックします。（このアイコンにカーソルを合わせると「HARをエクスポート」と表示されます）
ダウンロードダイアログが表示されますので、.HARファイルとしてコンピューターに保存しましょう。
Edge
問題が発生するページを表示した状態で、ブラウザ右上にある3点マークのアイコンをクリックし、メニューを表示します。
その他のツール > 開発者ツールをクリックします。
デベロッパーツールが展開されます。
メニューから「ネットワーク」タブをクリックします。（表示されていない場合は、 >> アイコンをクリックすると表示されます）
ネットワークタブ内に◯の中に■ボタンが表示されていることを確認します。ボタンが◯の中に●になっている場合は、クリックして記録を開始します。
また「ログを保持」のチェックボックスにチェックが入っていなかった場合は、チェックを入れてください。
操作する前に、◯の中に■ボタンの隣にある駐車禁止マークのようなアイコン（○の中に斜め線が入っているもの）をクリックしてください。これは、ログをクリアするボタンです。
この状態で、問題が発生する操作を実施します。すると、ネットワークリクエストが記録されていきます。
問題が再現する操作まで実施したら、ネットワークタブ内にある↓アイコンをクリックします。（このアイコンにカーソルを合わせると「HARをエクスポート」と表示されます）
※ 表示されていないときは、開発者ツールの表示領域を広げると表示されることがあります。
ダウンロードダイアログが表示されますので、.HARファイルとしてコンピューターに保存しましょう。
Firefox
問題が発生するページを表示した状態で、ブラウザ右上にある三本線のメニューアイコンをクリックします。
表示されたメニューから、その他のツール > Web開発ツール をクリックします。
Web開発ツールが展開されます。
メニューから「ネットワーク」タブをクリックします。（表示されていない場合は、 >> アイコンをクリックすると表示されます）
ネットワークタブ内でURLで絞り込み欄の隣にあるセクションにⅡボタンがあるのを確かめます。▶ボタンになっている場合は、クリックして記録を開始します。
歯車アイコンをクリックして「永続ログ」にチェックが入っていなかった場合は、チェックを入れてください。
操作する前に、虫眼鏡マークの隣にある駐車禁止マークのようなアイコン（○の中に斜め線が入っているもの）をクリックしてください。これは、ログをクリアするボタンです。
この状態で、問題が発生する操作を実施します。すると、ネットワークリクエストが記録されていきます。
問題が再現する操作まで実施したら、歯車アイコンをクリックします。表示されたメニューから「HAR形式ですべて保存」をクリックします。
ダウンロードダイアログが表示されますので、.HARファイルとしてコンピューターに保存しましょう。
Safari
Safariの場合は「開発」メニューを使用します。「開発」メニューが表示されていない場合は「MacのSafariで「開発」メニューのデベロッパツールを使用する」を参照して、表示してください。
「開発」メニューをクリックし、「Webインスペクタを表示」をクリックします。
Webインスペクタが表示されます。「ネットワーク」タブをクリックします。
もし、ログが残っているようだったら右端にあるゴミ箱アイコンをクリックして、ログをクリアします。「ログを保持」にチェックが入っていなかったらチェックを入れてください。
この状態で、問題が発生する操作を実施します。すると、ネットワークリクエストが記録されていきます。
問題が再現する操作まで実施したら、ネットワークタブ内にある「書き出す」をクリックします。
ダウンロードダイアログが表示されますので、.HARファイルとしてコンピューターに保存しましょう。
ちなみに、ファイルの中身はどんなもの？
下図のようにjson形式で記述されています。
{
"log": {
"version": "1.2",
"creator": {
"name": "WebInspector",
"version": "537.36"
},
"pages": [
{
"startedDateTime": "2022-01-18T02:56:30.073Z",
"id": "page_2",
"title": "https://example.com/index.php/blog/hello-concrete-cms",
"pageTimings": {
"onContentLoad": 5582.507999999507,
"onLoad": 5591.782999996212
}
}
],
"entries": [
{
"_initiator": {
"type": "script",
"stack": {...
(略)
このjsonデータをブラウザのときと同じようにグラフ表示等したい場合は、ブラウザのデベロッパー（開発）ツールがおすすめです。
各ブラウザは適当なページ上でデベロッパー（開発）ツールを開き、ネットワークタブを開いてログの中身をクリアします。（このとき、ログを記録する状態の場合は停止しておいてください）
そのあと、ネットワークログが表示されるエリアにHarファイルをドラッグ＆ドロップすると、閲覧することができます。
もし気になる方は、やってみてくださいね。
