LiveServerとは
VSCodeの拡張機能でWebページ作成をする際に便利なプラグイン
現在作成中のページをローカルサーバー経由でブラウザから開くことができる
さらに、リアルタイムで変更が反映されるからとても便利
問題点
Webページ作成をしているときにレスポンシブデザインの対応テストとしてスマホなどのPC以外の別端末で見たいときがあると思います。しかし、通常の設定ではPCで開いているサイトのURLにそのままアクセスしようとするとできないです。今回はURLを変更することによってスマホからURLコピペするだけでアクセスできるようにします。
やり方
VSCodeの設定を開きます。
「設定の検索」で「liveserver」と打ち込みます。
下へスクロールして「Use Local Ip」にチェックを入れます。
おしまい
結果
ブラウザ上に表示されるURLが「http://127.0.0.1:5500/index.html」から「http://192.168.XX.XX:5500/index.html」に変わったと思います。あとはこれにアクセスするだけで別端末からサイトが見れます。
追記
Chromeの検証ツールからPC表示とスマホ表示切り替えられるのでそっちのほうが速いです。