スマホ用の Web 画面を作成する時、実機での画面確認が必要なケースがあります。
そんな時、開発マシンで起動している Web サーバーにスマホからアクセスする必要があるのですが、サーバーによっては localhost や 127.0.0.1 からしか接続を受け付けないようなものがあります（IIS Express とか）。
今までは IIS のリバースプロキシを使って強引にアクセスしていたんですけど、Fiddler プロキシが便利だったので、そのやり方を紹介したいと思います。今回は、以下のように流れになります。
- Fiddler を外部から接続できるようにする
- iPhone のプロキシ設定で Fiddler を指定する
- iPhone から localhost.fiddler や ipv4.fiddler にアクセスする
Fiddler のプロキシを設定する
Fiddler を起動し "Rules" メニューから "Fiddler Options" を開きます。ダイアログの "Connections" タブに "Allow remote computers to connect" というチェックボックスがあるので、チェックを入れて再起動すると設定は完了です。これで、外部のクライアントから開発マシンで起動した Fiddler のプロキシを通すことができるようになります。ただし、Fiddler を終了するとプロキシが無効になるので、テスト中は Fiddler を起動し続ける必要があります。
iPhone が Fiddler のプロキシを使うように設定する
まず iPhone を開発マシンにアクセスできる WiFi に繋いでください。その WiFi の設定画面の下の方に HTTPプロキシの設定があるので、"手動" を選択し、「サーバー」に開発マシンの IP アドレス、「ポート」に "8888" を設定します。認証は設定しなくて大丈夫です。これで、iPhone の通信が開発マシンの Fiddler を経由するようになりました。
Safari から開発マシンの localhost にアクセスする
以上で設定は完了しているので、後は localhost や 127.0.0.1 にアクセスするやり方ですね。
Fiddler には以下のようなドメインの書き換え機能があるので、これを利用します。
- localhost.fiddler → localhost
- ipv4.fiddler → 127.0.0.1
例えば、開発マシンで起動している Web サーバーが 127.0.0.1 の 8080 をリッスンしている場合は http://ipv4.fiddler:8080/ でアクセスすることが可能です。
https でも問題なく、サーバーが localhost の 8443 をリッスンしている場合は https://localhost.fiddler:8443/ にアクセスします。
ですので、Safari の画面を開いて、上の URL 欄に http〜 の打ち込めば、開発マシンの Web サーバーにアクセスすることが可能になります。
もちろん、Fiddler を通しているので開発マシンで起動している Fiddler には iPhone の通信がキャプチャされるようになります。Fiddler はデフォトルで通信をバッファリングしているので、通信速度が気になるようであれば、ツールバーにある Stream ボタンを有効にすると少し快適になるかもしれません。
（追記） Fiddler のキャプチャは止めておいてもプロキシは有効になるようです。
最後に
今回は iPhone で説明しましたが、開発マシンの localhost や 127.0.0.1 に外部からアクセスしたいケースはちょくちょくあると思うので、そういう場合は外部のクライアントのプロキシを Fiddler に設定することで同じようにアクセスすることが可能になります。
ちなみに、Fiddler の外部からのアクセスを受け付ける機能は、外部のクライアントの通信を追いたい時に使うのが正しい使い方ですので、こちらもご利用ください。