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 は別物で構わない。