TL;DR

ホストマシンと検証機を同一ネットワークに接続する
Fiddler をインストールする
外部アクセスを許可する
(Host Remapping をする)
スマホのプロキシをホストマシンに向ける

前提

Windows にインストールされた VirtualBox 上で Web システムを開発している。
ゲストはブリッジ接続ではなく、 NAT とホストオンリーを利用している。
ホストマシンと検証機は同一ネットワーク内の無線 LAN に接続している。
普段は Chrome のデバッグツール等でスマホ表示を確認しているが、詳しい検証や調整は実機でしたい。
実機から VirtualBox 上のゲストにアクセスする方法はググれば色々出てくるが、なんだかハードルが高そう。

Fiddler をインストールする

公式サイトからダウンロードしてくる。
表示されているプルダウンを選択していき、最後にメールアドレスを入力すればダウンロードが始まる。
他のツールは有料だが Fiddler は無料で使える。
ダウンロードが完了したら実行し、適当に進めていけばインストールが完了する。

Fiddler の起動と設定

起動すると何か聞かれた気がするが、とりあえずキャンセル。

外部アクセスを許可する

Tools > Options を選択するとダイアログが開く。
Connnections タブを開き、 Allow remote computers to connect にチェックを入れる。
Fiddler listens on port の数字をメモっておく。

hosts の設定

ゲスト上で VirtualHost の機能を利用している場合は、これを設定しておく必要がある。
しかし、そうでない場合は特に設定する必要はないので次に進む。

メニューバーから Tools > HOST を選択するとダイアログが開く。
人によっては Tools > Host Remapping とかになってるかも。

入力書式は hosts と同じ。
例えば ゲスト の IP が 192.168.1.101 で、これに仮の URL を vbox01.fiddler とした場合は次のように書く。

192.168.1.10 vbox01.fiddler

区切り文字は 半角スペース でも タブ でも良い。
Save を押すとすぐに反映される。

スマホのプロキシを設定する

ホストマシン の IP を 192.168.2.201 とし、先に確認した Fiddler listens on port の値を 8888 とする。

iOS

設定 > Wi-Fi から接続済みのネットワークの i ボタンをタップする。
下方向にスワイプすると HTTPプロキシ という項目があるので、 手動 を選択する。
- サーバ の項目に 192.168.2.201 を入力する
- ポート の項目に 8888 を入力する
- 認証 はデフォルトの状態では OFF にしておく（緑にしない）
確定ボタンなどはないので、ホームボタン等で適当に抜ける

Android

設定 > Wi-Fi から接続済みのネットワークを長押しする。
ポップアップが出てくるので　ネットワークを変更 をタップする。
詳細設定項目 をタップする
プロキシ をタップし 手動 を選択する
入力フィールドが展開されるので、下記のように入力する。
- プロキシのホスト名 の項目に 192.168.2.201 を入力する
- プロキシポート の項目に 8888 を入力する
- プロキシを不使用 はとりあえず空欄
保存 をタップする。

ブラウザを起動する

ゲスト の IP または、 hosts を設定した場合はそれを、スマホのブラウザの URL 欄に入力する。
表示される。うまー。

備考

iOS の Safari をデバッグする際は、 Mac と接続しておけば Mac 上の Safari でインスペクタを起動することができるのでめっちゃ捗る。
この時、ホストマシンと Mac は別物で構わない。