VSCodeで書いたコードを、スマホのSafariでリアルタイムにプレビューしながらコーディングができます。

vscodeをスマホでプレビュー

サーバーにアップしてから実機で確認、面倒ではありませんか?(キャッシュとかも鬱陶しいよね)そんなときにはぜひこの方法を活用してください。

STEP
VSCodeに「Live Server」拡張機能をインストール

VSCodeに「Live Server」拡張機能がインストールされているか確認してください。
(まだの場合はインストールしましょう)

STEP
VSCodeの設定で「Use Local IP as host」にチェックを入れる

VSCodeの設定で検索窓に「Use Local」と入力し、「Use Local IP as host」にチェックを入れてください。(ローカルIPアドレスを使用するという設定をONにした状態 ※1

STEP
VSCode画面右下にある「Go Live」ボタンをクリック
STEP
PCからスマートフォンにURLをコピペ

Go Liveして表示された IPアドレスとポート番号(例:169.254.125.65:5500)を、スマートフォンのSafariやChromeなどのブラウザに入力してアクセスします。

注意:PCとスマホを同じWi-Fi環境に接続しておきましょう

※1 プライベートIPアドレスとは
プライベートIPアドレスとは、「家の中だけで使うあだ名」のようなものです。
それぞれの機器に、外には見えない“家の中だけで通じるあだ名=プライベートIPアドレス”がつけられます。これを使って、同じネットワーク内の機器同士がデータをやり取りできるようになります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次