VSCodeで制作中のサイトをスマホで確認する方法
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、スマホでサイト確認が終わったら、ファイアオールの設定を元に戻す。
まとめ
いかがでしたか?
コーディング作業では、「デベロッパーツールで見ている時は問題なかったのに、実際のスマホで見ると崩れている!」なんてことがよくあります。
今回ご紹介した方法を使えば、簡単に実機での確認ができますので、ぜひ利用してみてください。
最後までご覧いただきありがとうございました。