Wie richte ich in WebStorm eine Live-Preview für HTML und CSS ein?
- Vorbereitung und Projektstruktur
- Web Preview aktivieren
- Live Edit aktivieren und konfigurieren
- Integration mit Browser und JetBrains IDE Support Extension
- Live Edit starten
- Alternative: Externer Live-Server
- Fazit
Vorbereitung und Projektstruktur
Um eine Live-Preview in WebStorm zu nutzen, stellen Sie sicher, dass Sie ein Projekt mit HTML- und CSS-Dateien geöffnet haben. WebStorm unterstützt mehrere Wege, um eine Live-Vorschau anzuzeigen. Sie können entweder die integrierte Web Preview Funktion verwenden oder das sogenannte Live Edit aktivieren, das automatisch Änderungen im Browser anzeigt, sobald Sie Ihre Dateien speichern bzw. bearbeiten.
Web Preview aktivieren
In WebStorm gibt es eine eingebaute Web-Preview-Funktion, über die Sie Ihre HTML-Datei direkt im Editorfenster anzeigen lassen können. Öffnen Sie dafür Ihre HTML-Datei und suchen Sie in der rechten oberen Ecke des Editorbereichs das kleine Augensymbol oder klicken Sie im Menü auf View > Open in Browser. Alternativ können Sie mit der rechten Maustaste auf die HTML-Datei klicken und Open in Browser auswählen und dann einen Browser wählen. Dies ist zwar keine Live-Vorschau, aber ein schneller Weg, Ihre Seite anzuzeigen.
Live Edit aktivieren und konfigurieren
Für ein echtes Live-Preview-Erlebnis, bei dem Änderungen an HTML und CSS sofort im Browser sichtbar sind, können Sie die Funktion Live Edit nutzen. Damit werden Änderungen direkt im Browser reflektiert, ohne dass Sie das Fenster manuell neu laden müssen.
Öffnen Sie die Einstellungen Ihres WebStorm (unter Windows/Linux File > Settings, unter macOS WebStorm > Preferences).
Navigieren Sie zu Build, Execution, Deployment > Debugger > Live Edit.
Aktivieren Sie dort das Kontrollkästchen Enable Live Edit. Optional können Sie auch die Optionen wie Update application in Chrome on changes auswählen, damit die Vorschau automatisch im Chrome-Browser aktualisiert wird.
Integration mit Browser und JetBrains IDE Support Extension
Damit Live Edit funktioniert, benötigen Sie den Chrome-Browser sowie die JetBrains IDE Support Erweiterung in Chrome. Diese Erweiterung ermöglicht die Kommunikation zwischen WebStorm und Ihrem Browser und sorgt für die automatische Aktualisierung.
Öffnen Sie Chrome, besuchen Sie den Chrome Web Store und installieren Sie die Erweiterung JetBrains IDE Support. Nach der Installation sollten Sie in WebStorm keine Probleme mehr haben, Live Edit zu verwenden.
Live Edit starten
Öffnen Sie danach Ihre HTML-Datei in WebStorm. Starten Sie das Debugging, indem Sie auf das kleine grüne Debug-Symbol klicken oder die Tastenkombination verwenden (Shift + F9 in Windows/macOS). Dadurch wird die Seite im Chrome-Browser geöffnet und der Live Edit Modus gestartet.
Sobald Sie Änderungen an Ihrer HTML- oder CSS-Datei vornehmen und speichern, werden diese sofort im Browser übernommen. Sie ersparen sich so den manuellen Refresh.
Alternative: Externer Live-Server
Falls Sie mehr Flexibilität wünschen oder andere Browser bevorzugen, können Sie auch einen externen Live-Server verwenden, wie z.B. die Erweiterung Live Server für Visual Studio Code oder Node.js-basierte Lösungen (z.B. live-server npm-Paket). Diese können Sie über die WebStorm-Terminal-Schnittstelle starten und anschließend mit dem Browser öffnen. Änderungen an den Dateien werden dann ebenfalls live aktualisiert.
Fazit
WebStorm bietet mit Live Edit eine sehr komfortable Möglichkeit, HTML- und CSS-Dateien live im Browser zu bearbeiten und die Änderungen sofort sichtbar zu machen. Die Kombination aus eingebauter Preview und der JetBrains IDE Support Erweiterung in Chrome ermöglicht einen flüssigen Workflow für Webentwickler. Durch ein paar wenige Einstellungen und die Installation der passenden Erweiterung haben Sie eine leistungsfähige Live-Vorschau direkt in Ihrem Entwicklungs-Setup integriert.