Visual Studio CodeLiveサーバーが機能しない

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

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

表示したいHTMLファイルを右クリックして右クリックし、「LiveServerで開く」を選択するだけです。

しかし、Live Serverがブラウザーを開かず、期待どおりにページを表示しない場合はどうなりますか?これがあなたに起こっているならば、あなたが試すことができるいくつかのことがここにあります。

VSCodeを再起動します

VSCodeを最初から開始するのが最善の場合もあります。

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

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

LiveServerのブラウザを設定します

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

システムにデフォルトのブラウザを設定した場合でも、LiveServerに明示的に使用するブラウザを通知しても問題はありません。

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

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

ファイルの一番下までスクロールして、を貼り付けます"liveServer.settings.CustomBrowser": "chrome"

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

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

最後に、settings.jsonファイルを保存して、LiveServerの実行を再試行してください。

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

使用するブラウザーをLiveServerに指示した後でも、そのブラウザーでページが正しく開かない可能性があります。

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

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

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

自分でライブページに移動する

なんらかの理由でLiveServerがブラウザでページを自動的に開かない場合でも、心配はいりません。いつでもお好みのブラウザを開いて、ページを直接表示できます。

お好みのブラウザを開いて、に移動してください//127.0.0.1:5500/

たとえば、ファイルがと呼ばれる場合はindex.html、に移動し//127.0.0.1:5500/index.htmlます。

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

最後に

これらは、LiveServerが期待どおりに機能しない場合に試すことができるいくつかの一般的な修正です。

安全で幸せな(ライブ)コーディングを続けましょう。