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

当サイトはプロモーションが含まれています

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

目次

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

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

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

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

STEP3 VSCode画面右下にある「Go Live」ボタンをクリック

STEP4 PCからスマートフォンにURLをコピペ

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

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

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

勉強頑張ってね

#PR ----------

Adobe Creative Cloudをちょっと安く購入する方法 →Adobeベーシック講座

この記事が気に入ったら
フォローしてね!

勉強仲間にも教えてね
目次