Visual Studio Codeで制作中のサイトの仕上がりをスマホで実際に確認したい・・・

本番環境にアップする前に、色んなデバイスから確認したい・・・

そんな時はスマホからパソコンのローカルホストにアクセスすれば、本番環境にアップする前でもサイトを確認することができます。

以下の方法は、PCとスマホで同じWi-Fi 接続している場合のみ利用できます。

パソコン側の作業

1、VSCodeで拡張機能「Live Server」をインストール。

2、制作サイトのフォルダーを開き、右下の「Go Live」をクリック。

画面右下に「Server is Started at port:5500」と表示され、ブラウザでサイトが開きます。

3、PC のIPアドレスを確認する

タスクバーの「インターネットアクセス」から、接続しているWi-Fiのプロパティを参照。

プロパティの「IPv4 アドレス」の横に表示された数字（192.168.XXX.Xなど）がIP アドレスです。

※「Port:5500」をもう一度クリックするか、VSCodeを終了すると、スマホからは接続できなくなります。

スマホ側の作業

スマホのブラウザで、検索窓に「 IPアドレス:ポート番号」を入力する。

（例）192.168.XXX.X:5500

アクセスできない場合

パソコン側のファイアオール設定が原因の可能性があります。

1、スタートボタン→設定→更新とセキュリティ→Windows セキュリティ→ファイアウォールとネットワーク保護と進みます。

2、有効になっているファイアオールを無効にします。

3、スマホでサイト確認が終わったら、ファイアオールの設定を元に戻す。

まとめ

いかがでしたか？

コーディング作業では、「デベロッパーツールで見ている時は問題なかったのに、実際のスマホで見ると崩れている！」なんてことがよくあります。

今回ご紹介した方法を使えば、簡単に実機での確認ができますので、ぜひ利用してみてください。

最後までご覧いただきありがとうございました。