バーチャルホストで設定したローカル環境をスマホの実機から確認する方法

0. 想定している環境

• バーチャルホストを設定して、ローカルで開発している
• PCとスマホ、両方同じWi-Fiネットワークに接続している
• サイトがレスポンシブウェブデザインで実機でも確認が必要だよー

1. Charlesを起動する

HTTPデバッガのCharlesというアプリを使用します。
ダウンロードしてない方は、こちらから。

2. スマホ側のネットワーク設定

※例としてiOSデバイスで説明します。

設定アプリから接続しているWi-Fiのネットワーク設定を開き、HTTPプロキシを手動に変更します。
手動の各項目は以下のとおりです。

• サーバ： PC側のローカルIP
• ポート： 8888

8888はCharlesのデフォルトポートです。

3. スマホから確認

スマホのブラウザからローカルサイトを開くと、Charlesから確認のアラートがでるので、Allowを選択します。
ブラウザを更新するとローカルサイトが表示されます。