VSCodeのLive Serverが起動しないときの対処法｜原因と解決策をわかりやすく解説

VSCodeには数多くの便利な拡張機能がありますが、その中でも特に人気が高いのが「Live Server」です。

Live Serverを使えば、ほんの数クリックで作成中のWebページを実際のブラウザ上で確認できます。しかもライブリロード機能を搭載しているため、コードを修正するとその変更が即座にブラウザへ反映されます。フロントエンド開発の効率を大きく上げられる、まさに必須級の拡張機能といえるでしょう。

基本的な使い方はとてもシンプルです。表示したいHTMLファイルをエディタ内で右クリックし、「Open with Live Server」を選択するだけ。これだけでローカルサーバーが立ち上がり、ブラウザにページが表示されます。

▲ Live Serverの実行イメージ

しかし、いざ使おうとしたときに「ブラウザが開かない」「ページが表示されない」といったトラブルに遭遇することもあります。この記事では、Live Serverが正常に動作しないときに試したい対処法を順番に紹介します。

1. VSCodeを再起動してみる

意外と効果的なのが、VSCodeの再起動です。

まず、作業中のファイルはすべて保存してください。そのうえでVSCodeを完全に終了しましょう。VSCodeを閉じると、インストール済みの拡張機能もすべて停止します。

その後、VSCodeを再度起動し、確認したいHTMLファイルを右クリックして「Open with Live Server」を実行してみてください。一時的な不具合であれば、これだけで解消することも少なくありません。

2. Live Serverで使用するブラウザを指定する

拡張機能自体は正常に動作しているのに、システムに既定のブラウザが設定されていないためにページが開かないケースもあります。

OS側で既定ブラウザを設定していても、Live Serverに対して明示的にブラウザを指定しておくとより確実です。

手順は次のとおりです。まず「F1」キーでコマンドパレットを開き、「Preferences: Open Settings (JSON)」と入力して選択します。

すると、VSCodeのsettings.jsonファイルが開きます。

ファイルの末尾までスクロールし、最後の設定項目のあとにカンマ（,）を追加してから、以下の1行を貼り付けてください。

"liveServer.settings.CustomBrowser": "chrome"

値はChrome以外でも問題ありません。「firefox」「safari」など、お好みのブラウザ名を指定できます。

最後にsettings.jsonを保存し、もう一度Live Serverを実行してみましょう。

3. OSの既定ブラウザを設定する

Live Serverにブラウザを指定しても、まだ正しくページが開かない場合は、OS側の既定ブラウザ設定を見直してみてください。

設定方法はWindowsやmacOSなど、使用しているOSによって異なります。手順がわからない場合は、「（OS名） 既定のブラウザ 設定」などで検索するのが確実です。

たとえばWindowsの場合は、設定アプリの「既定のアプリ」から簡単にブラウザを変更できます。

▲ 出典：Advitya-sharma

4. ブラウザから直接ページを開く

それでもLive Serverが自動的にブラウザを開いてくれない場合は、自分で直接アクセスしてしまいましょう。

お好みのブラウザを開き、アドレスバーに以下のURLを入力してください。

https://127.0.0.1:5500/ファイル名

たとえばファイル名がindex.htmlであれば、https://127.0.0.1:5500/index.htmlにアクセスします。

Live Serverが稼働していれば、このURLでページが表示されるはずです。ポート番号5500はLive Serverのデフォルト設定なので、特に変更していなければそのまま利用できます。

まとめ

Live Serverが期待どおりに動作しないときは、①VSCodeの再起動、②settings.jsonでのブラウザ指定、③OSの既定ブラウザ設定、④URLへの直接アクセス、という4つの対処法を順番に試してみてください。

どれかひとつで解決できることがほとんどです。快適なライブコーディング環境を整えて、開発を楽しんでくださいね。

無料でプログラミングを学ぼう。freeCodeCampのオープンソースカリキュラムは、これまでに40,000人以上の人々を開発者としての就職へと導いてきました。