Web システムのデバッグにはコレ！HAR ファイルで通信記録を共有してみよう

こんにちは。フロントエンドエンジニアの辻です。
Gaji-Labo では、各メンバー同士で円滑にタスクを進められるよう情報共有の場を大切にしています。
今回の記事はそれにちなんで、ブラウザとサーバー間の通信を記録できる HAR ファイルを紹介します。
HAR ファイルを利用すれば、Web システムのデバッグにおいてエンジニア間での状況共有がスムーズになります！

HAR ファイルとは

改めて、HAR ファイルとはブラウザとサーバー間の通信を記録するためのファイルです。
拡張子は一般的に「.har」が用いられますが、ファイルの実体は巨大な JSON です。

HAR (ファイルフォーマット) | Wikipedia
ウェブ セッションのトラフィック データを取得する | Google アド マネージャーヘルプ

HAR ファイルで何ができる？

Web システム開発時のデバッグに役立ちます。
HAR ファイルには、ブラウザ上での通信記録をすべて JSON 形式で保存できます。
例えば、ある開発者のブラウザ上で発生した通信エラーを、HAR ファイルを介して、別の開発者が手元で確認できたりします。
また、テスト時のエビデンスとして手元に残しておくのも良いでしょう。

HAR ファイルを扱う際の注意点

HAR ファイルを扱う際の大きな注意点が 1 つあります。
基本的にHARファイルにはすべての通信記録が保存されるため、機密情報も HAR ファイルに含まれてしまいます。

閉じられたネットワーク内で、メンバー同士が Web システムのデバッグ目的で HAR ファイルを共有するだけなら問題ありません。しかし、外部とHAR ファイルをやりとりする場合は注意が必要です。
最悪の場合、個人情報の流出などに繋がりかねません。

HAR ファイルを扱う際は、この注意点だけは忘れないようにしましょう。

HAR ファイルの扱い方

では、試しに HAR ファイルを扱ってみましょう。
今回は、弊社の Web サイト（ https://www.gaji.jp/ ）を対象に通信記録を出力してみます。

HAR ファイルをダウンロードしてみよう

まずはブラウザを立ち上げます。今回は Google Chrome を利用します。
（ブラウザは何でも構いません。本記事執筆時点で Google Chrome、FireFox、Safari、Edge と主要ブラウザは HAR ファイルを取り扱えます。）

ブラウザを立ち上げたら、開発者ツールを開きます。（Win なら Ctrl + Shift + C。Mac なら Cmd + Option + C で開けます。）

開発者ツールを開いたら、「ネットワーク」タブを押下します。
https://www.gaji.jp/ へアクセスする前にネットワークパネルを展開しておきましょう。

次に、https://www.gaji.jp/ へアクセスしましょう。
ページ表示に必要なリソースの読み込みがすべて完了したら、ネットワークパネル上部の「↓」アイコンを押下します。
これで HAR ファイルをダウンロードできました。

HAR ファイルをアップロードしてみよう

次に HAR ファイルの中身を見てみましょう。
…と言ってもやる事は簡単です。

ブラウザの開発者ツールを開いて「ネットワーク」タグを押下します。
先程に押下した「↓」アイコンの隣にある「↑」アイコンを押下します。

すると、ファイル選択ダイアログが表示されますので、アップロードしたい HAR ファイルを選択します。

HAR ファイルをアップロードすると、その中身が読み込まれて、ネットワークパネルに展開されました。
このように HAR ファイルを利用すれば、ブラウザの通信記録を保存したり、他のユーザーの通信記録を自分のブラウザの開発者ツール上で確認できます。
（ちなみにアップロードは、ネットワークパネルに HAR ファイルをドラッグ&ドロップしてもできます。）

まとめ

以上、HAR ファイルとその扱い方についてでした。
HAR ファイルを使えば、他のユーザーの通信記録を自分のブラウザの開発者ツール上で確認できるため、Web システムのデバッグに大変便利です。

最後にしつこいようですが、HAR ファイルには機密情報が含まれる点には注意しましょう。

Gaji-Labo では、各メンバー同士が滞りなく連携できるよう情報共有を大切にしています。
フロントエンドエンジニアをはじめ、各職種でメンバーを募集しておりますので、興味のある方はぜひ資料をご覧ください！

Gaji-Labo フロントエンドエンジニア向けご案内資料