開発者ブログ
ツール・ライブラリ » HAR通信再現ツール

HAR通信再現ツール

Last modified by simdy on 2017/01/25, 11:52

HAR通信再現ツール

概要

ブラウザの開発者ツールで保存できる通信ログファイル(HAR : Http ARchive)をもとに、通信内容を再現するツールです。
このツールはHTTPサーバとして振る舞い、ブラウザからのリクエストに対してHARファイルに保存された内容を返します。
これにより、アプリケーションサーバやデータベースなどがない環境でもブラウザ上で画面を再現してデバッグを行うことができます。

ダウンロード

(準備中)

インストール

※事前にNode.jsをインストールしておいてください。

HAR通信再現ツールのZIPファイルの中身を適当なフォルダに展開してください。

使い方

基本的な使い方

  1. ブラウザの開発者ツールで、対象のページの通信内容を記録しHARファイルを保存します。
    (Chromeの場合はNetworkタブを開き「Save as HAR with contents」で保存できます。)
  2. HARファイルをわかりやすく修正し、ツールを展開したフォルダ内の harフォルダに配置します。
  3. 以下のコマンドを実行します。(workフォルダ内にHARフォルダの中身が展開されます)
      > read-har.cmd {harファイル名から拡張子を除いた名前} {ポート込みのURL(http://localhost:8080 など)}
  4. 以下のコマンドを実行します。(HTTPサーバが起動します。)
      > server.cmd {harファイル名から拡張子を除いた名前}
  5. ブラウザで http://localhost:3000/(以下再現したいページのパス)  にアクセスすると、HARファイルに保存された内容が表示されます。
Internet Explorer 11の場合、画像ファイルの中身はHARファイルに含まれません。
そのため、IE11で保存したHARファイルを使用した場合、画像は再現できません。
画像を含めて再現したい場合は、ChromeやFirefoxをお使いください。

レスポンスで返す内容を変更する方法

work フォルダの展開したフォルダに resource フォルダがあり、ここに各パスのファイルの中身があるので、
これらの 0.content を書き換えることで、ファイルを差し替えることができます。

また、別パスにファイルを追加したい場合は other フォルダ以下に置けば見えるようになります。

リリースノート

  • ver.1.0 [2017/2/1]
    • 最初のリリース

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.