Live Browser Preview in VS Code: Eine Kurzanleitung

Nichts unterbricht den Entwicklungsflow mehr als das ständige Wechseln zwischen Editor und Browser, um Änderungen zu überprüfen. Falls Sie das Alt-Tab-Spiel leid sind, das Sie jedes Mal spielen müssen, wenn Sie CSS anpassen oder HTML aktualisieren, können VS Codes Live-Preview-Erweiterungen Ihren Workflow transformieren. Diese Anleitung behandelt die beiden besten Optionen—Microsofts Live Preview und den klassischen Live Server—und hilft Ihnen dabei, die richtige für Ihre Projekte zu wählen.

Die richtige Live-Preview-Erweiterung für VS Code wählen

Beide Erweiterungen lösen dasselbe Kernproblem, glänzen aber in verschiedenen Szenarien. Das Verständnis ihrer Stärken hilft Ihnen dabei, das Tool zu wählen, das zu Ihrem Workflow passt.

Microsoft Live Preview: Die moderne Wahl

Live Preview glänzt, wenn Sie mehr als nur einfaches Datei-Serving benötigen. Der eingebettete Browser hält alles innerhalb von VS Code, perfekt für Tutorials, Workshops oder wenn Bildschirmplatz wichtig ist. Die Erweiterung bietet zwei Aktualisierungsmodi: sofortige Updates während der Eingabe oder traditionelles Speichern-zum-Aktualisieren-Verhalten.

Verwenden Sie Live Preview, wenn Sie benötigen:

• Eingebettete Vorschau neben Ihrem Code
• Server-Request-Logging für Debugging
• Integration mit VS Codes eingebautem JavaScript-Debugger
• Edge DevTools für Element-Inspektion

Die Erweiterung funktioniert am besten mit statischen Websites und einfachen SPAs. Für komplexe Frameworks mit eigenen Dev-Servern (React, Vue, Angular) bleiben Sie bei den Framework-Tools.

Live Server: Die leichtgewichtige Alternative

Live Server bleibt die erste Wahl für Entwickler, die Einfachheit wollen. Ein Klick startet Ihr Projekt in einem externen Browser mit automatischer Aktualisierung beim Speichern. Das Killer-Feature? Netzwerkzugriff—testen Sie Ihr Responsive Design auf echten Handys und Tablets über die lokale IP-Adresse Ihres Computers.

Wählen Sie Live Server für:

• Schnelle statische Website-Entwicklung
• Geräteübergreifende Responsive-Tests
• Minimale Konfigurationsanforderungen
• Traditionellen externen Browser-Workflow

Schnelle Einrichtung: Von der Installation zur Live-Vorschau

Installation Ihrer gewählten Erweiterung

Öffnen Sie VS Codes Erweiterungspanel (Strg+Umschalt+X oder Cmd+Shift+X auf Mac). Suchen Sie nach “Live Preview” (von Microsoft) oder “Live Server” (von Ritwick Dey). Überprüfen Sie den Publisher-Namen—mehrere veraltete Erweiterungen erscheinen noch in den Suchergebnissen. Klicken Sie auf Installieren und Sie sind bereit.

Starten Ihrer ersten Live-Vorschau

Kritischer erster Schritt: Öffnen Sie Ihren Projektordner als Workspace (Datei > Ordner öffnen). Einzeldatei-Vorschauen funktionieren, verursachen aber Pfadprobleme mit verlinkten Ressourcen.

Für Live Preview: Rechtsklick auf eine beliebige HTML-Datei und wählen Sie “Show Preview” für eingebettete Ansicht oder “Show Preview in External Browser” für traditionellen Workflow.

Für Live Server: Rechtsklick auf Ihre HTML-Datei und wählen Sie “Open with Live Server” oder klicken Sie “Go Live” in der Statusleiste.

Beide Erweiterungen überwachen Ihre Dateien und aktualisieren automatisch. Speichern Sie Ihre Änderungen und beobachten Sie, wie sich die Vorschau aktualisiert—keine manuelle Aktualisierung nötig.

Häufige Probleme und schnelle Lösungen

Workspace vs. Einzeldatei-Fallstricke

Sehen Sie “file is not a child of the server root”-Warnungen? Sie sind auf das häufigste Problem gestoßen. Beide Erweiterungen servieren Dateien vom Workspace-Root. Das Öffnen einzelner Dateien ohne Workspace bricht relative Pfade. Öffnen Sie immer Ihren Projektordner, nicht nur die HTML-Datei.

Müssen Sie von einem Unterordner servieren? Passen Sie den Server-Root in den Einstellungen an:

{
  "livePreview.serverRoot": "/src"
}

Für Live Server verwenden Sie:

{
  "liveServer.settings.root": "/src"
}

Der universelle “Fenster neu laden”-Fix

Kontextmenü-Optionen fehlen? Erweiterung reagiert nicht? Bevor Sie weiter troubleshooten, versuchen Sie VS Codes universellen Fix: Strg+Umschalt+P (oder Cmd+Shift+P auf Mac), dann “Developer: Reload Window”. Dies löst die meisten Erweiterungs-Glitches ohne Verlust Ihrer Arbeit.

Erweiterte Tipps für Power-User

Port-Konfiguration und Multi-Root-Workspaces

Standard-Ports bereits belegt? Konfigurieren Sie benutzerdefinierte Ports in den Einstellungen:

{
  "liveServer.settings.port": 5501,
  "livePreview.portNumber": 3001
}

Arbeiten Sie mit Multi-Root-Workspaces? Jeder Root bekommt seine eigene Server-Instanz. Fahren Sie mit der Maus über den Statusleisten-Indikator, um alle aktiven Ports zu sehen.

Spezielle Umgebungen: Codespaces und Remote-Entwicklung

Verwenden Sie GitHub Codespaces? Die eingebettete Vorschau benötigt manuelle Port-Weiterleitung. Öffnen Sie das Ports-Panel, klicken Sie auf die weitergeleiteten URLs, um die Authentifizierung auszulösen, dann starten Sie die Vorschau neu. Externe Browser-Vorschau funktioniert typischerweise ohne zusätzliche Schritte.

Bemerken Sie Stil-Unterschiede zwischen eingebetteter und externer Vorschau? Leeren Sie den Cache Ihres externen Browsers—die eingebettete Vorschau startet immer frisch, während externe Browser möglicherweise gecachte Assets servieren.

Fazit

Wählen Sie Live Preview, wenn Sie Debugging-Tools, eingebettete Vorschau oder Server-Logging benötigen. Entscheiden Sie sich für Live Server für unkompliziertes statisches Hosting mit Geräte-Tests. Beide Erweiterungen erhalten regelmäßige Updates und funktionieren zuverlässig mit modernem VS Code.

Beginnen Sie damit, die Erweiterung zu Ihrem Projekttyp zu matchen. Statisches HTML/CSS/JS? Beide funktionieren. Brauchen Sie Debugging? Live Preview. Testen über Geräte hinweg? Live Server. Das beste Live-Preview-VS-Code-Setup ist das, welches Ihnen nicht im Weg steht und Sie sich aufs Entwickeln konzentrieren lässt.

Häufig gestellte Fragen

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.