はじめに
Webアプリのテストをしていると、「APIのレスポンスが遅いときにローディングがちゃんと出るか」「サーバーが500を返したときにエラー画面が出るか」を確認したくなることがあります。
サーバー側を実際に止めたり遅くしたりするのは大変ですが、Fiddler Classic の AutoResponder 機能を使えば、クライアントとサーバーの間に入って、特定のリクエストに対してだけレスポンスを遅延させたりエラーを返したりできます。
この記事では、
- 特定のAPIのレスポンスを任意の秒数だけ遅延させる
- 特定のAPIに対してHTTP 500などのエラーを返させる
の2つを、実際にハマったポイントも含めてまとめます。
環境
- Fiddler Classic（Windows）
- 対象は
https://のWebアプリ
事前準備：HTTPSの復号設定
対象が https:// の場合、Fiddler が通信の中身を見られるようにHTTPS復号を有効にしておく必要があります。これをやらないと、HTTPSリクエストにルールがマッチしません。
- Tools → Options → HTTPS タブを開く
- Capture HTTPS CONNECTs と Decrypt HTTPS traffic の両方にチェック
- 証明書のインストールを求められたら許可する（検証用のローカル証明書）
- OKで閉じる
① レスポンスを遅延させる
AutoResponderの設定
- 右ペインの AutoResponder タブを開く
- 上部の以下にチェックを入れる
- Enable rules（ルールを有効化）
- Unmatched requests passthrough（ルールに合わない通信はそのまま通す。これを忘れると関係ない通信まで止まる）
-
Enable Latency（遅延を有効化。
*delay:を使うならこれが必須）
- Add Rule を押す
- Rule Editor の上段（マッチ条件）に対象URLにマッチする正規表現を入力する
regex:(?i).*example\.com/api/1\.0/system/functions/.*
- 下段（アクション）に遅延時間をミリ秒で指定する
*delay:10000
（上記は10秒の例。3秒なら *delay:3000）
- Save を押す
マッチ条件の正規表現について
URLの末尾についている ?_=1782442145194 のようなクエリパラメータは、キャッシュ回避用のタイムスタンプで毎回変わります。そのため、マッチ条件には末尾の .* を入れてクエリ部分を吸収させ、パス部分だけを指定するのがポイントです。
(?i) は大文字小文字を無視する指定です。
② 500エラーなどを返させる
レスポンス遅延と同じ要領で、アクション欄を書き換えるだけです。
マッチ条件（上段）はそのまま使い、アクション欄（下段）を次のように変えます。
500 Internal Server Error を返す場合:
*status:500
503 Service Unavailable の場合:
*status:503
404 Not Found の場合:
*status:404
書き換えたら Save を押せば反映されます。アプリのエラーハンドリングやエラー画面の表示確認に便利です。
おまけ：接続そのものを失敗させる
ステータスすら返さず、ネットワーク断やタイムアウトを再現したい場合は次のアクションが使えます。
接続を即座にリセット（切断）する:
*drop
応答せず放置してタイムアウトさせたい場合は、極端に長い遅延を入れる:
*delay:99999999
ハマったポイント（重要）
1. 日本語キーボードでバックスラッシュが全角になる
正規表現のドットのエスケープ（\.）を入力するとき、日本語キーボードだとバックスラッシュキーが**全角の円記号「￥」**を出してしまうことがあります。
# NG（全角￥が混入している）
regex:(?i).*stg￥.lmr-map￥.jp/...
# OK（半角バックスラッシュ）
regex:(?i).*stg\.lmr-map\.jp/...
全角が混じると正規表現として正しく解釈されず、マッチしません。見分けづらいので、不安なときはドットのエスケープを使わない書き方にすると安全です。.（任意の1文字）はこの用途では実害がほぼないので、エスケープなしでも問題なく動きます。
regex:(?i).*stg.lmr-map.jp/admin/api/1.0/system/functions/.*
2. Enable Latency のチェックを忘れると遅延が効かない
*delay: は AutoResponder の Enable Latency がオンになっていて初めて機能します。ルール自体がマッチしていても、ここがオフだと遅延が無視されて素通りします。
3. *delay: や *status: ではターゲットマークが付かないことがある
AutoResponder でレスポンスを完全に差し替えるルールを作ると、セッション一覧の行頭にターゲットマーク（◎印）が付きます。しかし *delay: は「通信をそのままサーバーへ通しつつ遅延だけ加える」処理（passthrough に近い扱い）のため、◎マークが付かないことがあります。
そのため「マークが付かない＝マッチしていない」と判断するのは誤りです。効いているかどうかは Fiddler のアイコンではなく、ブラウザの開発者ツール（Networkタブ）の「時間」やステータスで確認するのが確実です。
動作確認の方法
- ブラウザの開発者ツールを開き、Networkタブを表示
- 対象のAPIを叩く
- 該当リクエストの「時間」が指定した遅延秒数になっているか、ステータスが指定したコードになっているかを確認
実際に *delay:100000（100秒）を指定して、開発者ツールの時間が約1.7分になれば、遅延が正しく効いている証拠です。
おわりに
Fiddler Classic の AutoResponder を使えば、サーバーに手を入れずにレスポンスの遅延やエラーをクライアント側でシミュレートできます。フロントエンドのローディング表示やエラーハンドリングのテストに重宝します。
ポイントは、
- HTTPS復号と
Enable rules/Unmatched requests passthrough/Enable Latencyのチェックを忘れない - 正規表現の全角バックスラッシュに注意
- 効いているかは Fiddler のマークではなく開発者ツールで確認する
の3点です。同じようにハマっている方の参考になれば幸いです。