「HARファイルって何?」
「ページの読み込みが遅い原因を知りたい」
「Webのトラブルシューティングを行いたい」
このような場合には、この記事が参考となります。
この記事では、Webトラブルの解決に効果的なHARファイルを解説しています。
本記事の内容
- HARファイルとは?
- HARファイルの確認
それでは、上記に沿って解説していきます。
HARファイルとは?
HARとは、HTTP ARchive (アーカイブ) 形式の短縮形です。
HARファイルには、Webブラウザとサイトとのやり取りがすべて記録されます。
そこには、パスワードや個人情報が含まれることもあるでしょう。
その点では、取り扱いに注意すべきファイルと言えます。
そして、HARファイルの拡張子は「.har」となります。
データ形式は、JSONファイルです。
また、HARファイルは主にトラブルシューティングで利用されます。
ブラウザでWebサイトを見ている最中に起こったトラブルが対象です。
トラブルには、ページ読み込みが遅いことも含みます。
そのようなトラブルの原因を調査するために、HARファイルが必要となります。
よって、HARファイルはプログラマー以外の一般ユーザーにも関係してきます。
例えば、AdobeのサポートサイトにHARファイルについての記載があります。
HARファイルを生成する
https://helpx.adobe.com/jp/captivate-prime/kb/generate-HAR-file.html
上記ページの内容は、ChromeにおけるHARファイルの生成(抽出)方法です。
トラブル解決のために、HARファイルをサイト利用者に提出してもらう必要があります。
そのために、HARファイルの作成方法を各サイトのサポートページで公開しています。
実は、それぐらいHARファイルは身近な存在ということです。
以上、HARファイルについて説明しました。
次は、実際のHARファイルを見てみましょう。
HARファイルの確認
HARファイルを確認していきます。
わかりやすいように、次の2つの処理に分けます。
- HARファイルの取得
- HARファイルの表示
それぞれを下記で説明します。
HARファイルの取得
Example Domain
https://example.com/
上記ページのHARファイルを取得します。
取得方法は、「HAR」をGoogleで検索しましょう。
それこそ、各サイトのサポートページがたくさんヒットします。
それらのページを見れば、簡単にHARファイルを取得できます。
ファイル名は、「example.com.har」です。
なお、検証ではChromeを利用しています。
ブラウザによって、HARファイルの取得方法が異なります。
HARファイルの表示
HARファイルは、JSON形式のデータです。
そのため、エディタで確認できます。
しかし、エディタだと見にくいです。
そのため、通常は専用のビューワーを利用します。
個人的には、GoogleのWebツールを利用しています。
HAR Analyzer
https://toolbox.googleapps.com/apps/har_analyzer/
Webツールですが、速度は問題ありません。
結構大きいサイズのHARファイルでもサクサク見れます。
このツールに「example.com.har」をアップロードします。
その結果は、以下。
詳細を確認したいURLをクリックします。
そうすると、画面右に詳細が表示されます。
詳細は、それぞれ以下のモノを確認できます。
- リクエスト
- 応答
- 応答のコンテンツ
- Cookie
- タイミング
「タイミング」を見てみましょう。
遅延しているページの調査において役立ちそうです。
また、「応答のコンテンツ」にはデータ(ここではhtmlタグ)がそのまま記載されています。
「コンテンツ」をクリックすると、ダウンロードができます。
これは、スクレイピングを行う上で重宝しそうな機能です。
以上、HARファイルの確認を説明しました。