Visual Studio Code Live Server funktioniert nicht

VSCode hat viele großartige Erweiterungen und Live Server ist eine der besten.

Mit nur wenigen Klicks können Sie mit Live Server Ihre Seite in einem tatsächlichen Browser live sehen. Besser noch, es bietet Live-Reload. Wenn Sie also Ihren Code aktualisieren, werden die Änderungen auch im Browser angezeigt.

Alles, was Sie tun müssen, ist mit der rechten Maustaste in die HTML-Datei zu klicken, die Sie anzeigen möchten, mit der rechten Maustaste zu klicken und dann "Mit Live Server öffnen" auszuwählen:

Aber was ist, wenn Live Server Ihren Browser nicht öffnet und Ihre Seite nicht wie erwartet anzeigt? Wenn Ihnen dies passiert, können Sie hier einige Dinge ausprobieren.

Starten Sie VSCode neu

Manchmal ist das Beste, was Sie tun können, VSCode von Grund auf neu zu starten.

Speichern Sie zunächst Ihre gesamte Arbeit. Schließen Sie dann VSCode, wodurch auch alle von Ihnen installierten Erweiterungen gestoppt werden.

Öffnen Sie dann VSCode erneut und versuchen Sie es erneut. Gehen Sie zu der HTML-Datei, die Sie anzeigen möchten, klicken Sie mit der rechten Maustaste und wählen Sie "Mit Live Server öffnen".

Stellen Sie den Browser für Live Server ein

Möglicherweise funktioniert die Erweiterung, aber Ihr System verfügt nicht über einen Standardbrowser.

Selbst wenn Sie den Standardbrowser für Ihr System festgelegt hätten, würde es nicht schaden, Live Server mitzuteilen, welchen Browser Sie explizit verwenden möchten.

Öffnen Sie zuerst die Befehlspalette mit F1, geben Sie sie ein Preferences: Open Settings (JSON)und wählen Sie diese Option aus.

Dadurch wird Ihre VSCode- settings.jsonDatei geöffnet .

Scrollen Sie bis zum Ende der Datei und fügen Sie sie ein "liveServer.settings.CustomBrowser": "chrome".

Scrollen Sie bis zum Ende der Datei, fügen Sie nach der letzten Einstellung ein Komma hinzu und fügen Sie Folgendes ein "liveServer.settings.CustomBrowser": "chrome":

Beachten Sie, dass Sie können auch verwenden "firefox", "safari"oder ein anderer Browser als der Wert für die "liveServer.settings.CustomBrowser"Einstellung.

Speichern Sie abschließend die settings.jsonDatei und versuchen Sie erneut, Live Server auszuführen.

Legen Sie den Standardbrowser für Ihr Betriebssystem fest

Selbst nachdem Sie Live Server mitgeteilt haben, welchen Browser Sie verwenden möchten, ist es möglich, dass Ihre Seite in diesem Browser immer noch nicht richtig geöffnet wird.

Als nächstes müssen Sie den Standardbrowser für Ihr Betriebssystem selbst festlegen.

Die genaue Methode hierfür kann je nach Betriebssystem variieren. Wenn Sie sich nicht sicher sind, suchen Sie am besten danach.

So sieht die Einstellungsseite in Windows aus:

Gehen Sie selbst zur Live-Seite

Wenn Live Server die Seite in Ihrem Browser aus irgendeinem Grund immer noch nicht automatisch öffnet, machen Sie sich keine Sorgen. Sie können jederzeit den Browser Ihrer Wahl öffnen und die Seite direkt anzeigen.

Öffnen Sie einfach Ihren bevorzugten Browser und gehen Sie zu //127.0.0.1:5500/.

Wenn Ihre Datei beispielsweise aufgerufen wird index.html, gehen Sie einfach zu //127.0.0.1:5500/index.html.

Solange Live Server ausgeführt wird, sollte Ihre Seite angezeigt werden.

Abschließend

Dies sind einige häufige Korrekturen, die Sie ausprobieren können, wenn Live Server nicht wie erwartet funktioniert.

Bleiben Sie sicher und freuen Sie sich über (Live-) Codierung.