VSCode ライブ サーバーのトラブルシューティング:起動に失敗する理由とその修正方法

VSCode には多くの優れた拡張機能があり、Live Server はその中でも最高の拡張機能の 1 つです。

Live Server を使用すると、数回クリックするだけで、実際のブラウザでページをライブで表示できます。さらに良いことに、ライブ リロード機能があるため、コードを更新すると、その変更がブラウザにも反映されます。

表示したい HTML ファイルを右クリックし、右クリックして [ライブ サーバーで開く] を選択するだけです。

稼働中のライブサーバー

しかし、Live Server がブラウザを開いて期待どおりにページを表示しない場合はどうすればよいでしょうか?このようなことが起こった場合は、次のことを試してみてください。

VSCode を再起動します

場合によっては、VSCode を最初から開始することが最善の方法である場合があります。

まず、すべての作業内容を保存します。次に、VSCode を閉じます。これにより、インストールしたすべての拡張機能も停止します。

次に、VSCode を再度開いて再試行します。表示する HTML ファイルに移動して右クリックし、[ライブ サーバーで開く] を選択します。

ライブサーバー用のブラウザを設定する

拡張機能は動作しているものの、システムにデフォルトのブラウザがない可能性があります。

システムのデフォルトのブラウザを設定したとしても、どのブラウザを使用したいかを Live サーバーに明示的に知らせても問題ありません。

まず、F1 キーでコマンド パレットを開き、Preferences: Open Settings (JSON) と入力します。 をクリックしてそのオプションを選択します。

これにより、VSCode settings.json が開きます。 ファイル。

ファイルの一番下までスクロールし、最後の設定の後にカンマを追加して、"liveServer.settings.CustomBrowser": "chrome" を貼り付けます。 :

"firefox" も使用できることに注意してください。 、"safari" 、または他のブラウザを "liveServer.settings.CustomBrowser" の値として使用します。

最後に、settings.json を保存します。 ファイルを削除して、ライブ サーバーを再度実行してみてください。

オペレーティング システムのデフォルトのブラウザを設定します

Live Server にどのブラウザを使用するかを伝えた後でも、そのブラウザでページが正しく開かれない可能性があります。

次に試すことは、オペレーティング システム自体のデフォルトのブラウザを設定することです。

これを行う正確な方法はオペレーティング システムによって異なる場合があるため、わからない場合は方法を検索することをお勧めします。

Windows の設定ページは次のようになります。

クレジット:Advitya-sharma

自分でライブページにアクセスしてください

何らかの理由で Live Server がブラウザでページを自動的に開かない場合でも、心配する必要はありません。いつでも、選択したブラウザを開いてページを直接表示できます。

好みのブラウザを開いて http://127.0.0.1:5500/<your_file_name> にアクセスしてください。 .

たとえば、ファイルの名前が index.html であるとします。 http://127.0.0.1:5500/index.html に移動してください。 .

Live Server が実行されている限り、ページが表示されるはずです。

終わりに

これらは、Live Server が期待どおりに動作しない場合に試せる一般的な修正です。

安全に、楽しく (ライブ) コーディングを行ってください。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう