申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog VSCodeで制作中のサイトをスマホで確認する方法

VSCodeで制作中のサイトをスマホで確認する方法

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

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

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

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

目次

  1. パソコン側の作業
  2. スマホ側の作業
  3. アクセスできない場合
  4. まとめ

パソコン側の作業

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、スマホでサイト確認が終わったら、ファイアオールの設定を元に戻す。

まとめ

いかがでしたか?

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

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

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