Live Server, eine Erweiterung von Visual Studio (VS) Code, ermöglicht Entwicklern eine Vorschau ihrer Arbeit in Echtzeit. Durch die Erweiterung entfällt die mühsame manuelle Aktualisierung des Browsers bei jeder Änderung, die sich bei größeren Projekten summieren kann. Dies ist besonders praktisch für Webentwickler, die mit HTML, CSS und JavaScript arbeiten.
In dieser Anleitung wird erklärt, wie Sie das Tool einrichten, anpassen und mit verschiedenen Dateitypen verwenden und einige häufige Probleme lösen, auf die ein Entwickler bei der Verwendung stoßen kann.
Öffnen eines Live Server-Projekts in VS Code
Ohne Live Server müssen Sie Ihren Browser jedes Mal, wenn Sie Ihren Code ändern oder Inhalte hinzufügen, manuell aktualisieren, damit die Updates angezeigt werden. Um dies ins rechte Licht zu rücken: Wenn Sie 100 Änderungen pro Tag vornehmen, müssen Sie Ihren Browser möglicherweise mehr als 100 Mal aktualisieren, um jede Änderung zu sehen. So können Sie ein Projekt mit Live Server in Visual Studio Code öffnen:
- Installieren Sie die Live Server-Erweiterung vom Marketplace. Sie finden es in der VS Code-Aktivitätsleiste.
- Öffnen Sie Ihr Projekt, indem Sie je nach Wunsch auf „Datei“ und „Datei öffnen“ klicken oder Tastaturkürzel verwenden.
- Klicken Sie mit der rechten Maustaste auf die HTML-Datei im Projekt und wählen Sie im Kontextmenü „Mit Live-Server öffnen“.
In einem neuen Browserfenster wird die Live-Seite angezeigt. Alle Änderungen, die Sie an den Projektdateien vornehmen, werden automatisch im Browser aktualisiert.
Anpassen der Live-Servereinstellungen in VS Code
Um die Live Server-Erweiterung optimal zu nutzen, probieren Sie die verschiedenen Anpassungsoptionen aus, die in den Einstellungen verfügbar sind. Unter anderem können Sie die Portnummer, HTTPS- und Proxy-Konfigurationen ändern. Lassen Sie uns Schritt für Schritt durch die Implementierung dieser Anpassungsoptionen gehen.
Ändern Sie die Standard-Portnummer
Möglicherweise möchten Sie eine andere Portnummer als die Standard-Portnummer 5500 verwenden. Dies ist ganz einfach:
- Suchen Sie die Zeile „liveServer.settings.port“ (Standardportwert ist 5500).
- Stellen Sie für eine zufällige Portnummer den Wert 0 ein oder wählen Sie die Nummer aus, die Sie verwenden möchten.
Aktivieren Sie HTTPS-Verbindungen
Aktivieren Sie HTTPS-Verbindungen für mehr Sicherheit, etwa so:
- Suchen Sie die Zeile des HTTPS-Protokolls „liveServer.settings.https“.
- Ändern Sie den Wert „enable“ in „true“.
- Geben Sie bei Bedarf die Dateipfade für Zertifikat, Schlüssel und Kennwort ein.
Proxy-Einstellungen konfigurieren
Für bestimmte Szenarien kann es erforderlich sein, Proxy-Einstellungen zu konfigurieren. So richten Sie einen Proxy ein:
- Aktivieren Sie den Proxy mit „liveServer.settings.proxy“.
- Ändern Sie „enable“ in „true“, falls dies noch nicht geschehen ist.
- Setzen Sie „baseUri“ auf den gewünschten Proxy-Standort.
- Geben Sie „proxyUri“ für die tatsächliche URL an.
Integration von Edge DevTools mit Live Server in VS Code
Die Integration von Edge DevTools und Live Server in Visual Studio Code kann die Webentwicklung verbessern, indem sie sie deutlich effizienter macht. Diese Kombination von Tools zeigt gleichzeitig Änderungen in Echtzeit an und bietet direkten Zugriff auf Entwicklungstools.
- Installieren Sie die Live Server-Erweiterung für Visual Studio Code vom VS Code Marketplace.
- Installieren Sie die Edge DevTools-Erweiterung für VS Code aus derselben Quelle, indem Sie nach „Microsoft Edge Tools für VS Code“ suchen.
- Nutzen Sie die integrierten Entwicklungstools des Browsers, um Änderungen automatisch mit der Quelle zu synchronisieren.
Wenn beide Erweiterungen installiert sind, können Sie eine Live-Vorschau Ihrer Änderungen in einem eingebetteten Browserfenster in VS Code sehen.
Verwendung von Live Server mit verschiedenen Dateitypen
Die Live Server-Erweiterung ist vielseitig genug für viele Dateitypen. Es funktioniert standardmäßig mit HTML-Dateien und unterstützt CSS- und JavaScript-Dateien. Wenn Sie ein Stylesheet oder Skript mit diesen Dateitypen ändern, aktualisiert die Erweiterung den Browser sofort, um die Änderungen widerzuspiegeln. Entwickler, insbesondere Front-End-Webdesigner, können von der Sofortaktualisierungsfunktion von Live Server profitieren. Wenn Sie CSS optimieren, sehen Sie die Auswirkungen Ihrer Änderungen in Echtzeit – Sie müssen nicht warten, um zu überprüfen, ob Farbe, Schriftart oder Layout korrekt sind. Und für HTML- und JavaScript-Entwickler ist es einfach, Bugs und Fehler zwischen verschiedenen Dateien zu erkennen.
Live Server ist immer noch praktisch für diejenigen, die hauptsächlich mit PHP-Dateien arbeiten. Um die Funktionalität mit PHP nutzen zu können, müssen Sie jedoch einen lokalen Server konfigurieren, der PHP unterstützt.
Live Server ist mit statischen Seitengeneratoren wie Jekyll und Hugo kompatibel. Sie ermöglichen es Ihnen, die Ausgabe Ihrer statischen Website anzuzeigen und schnell zu ändern. Die Integration von Live Server mit einem statischen Seitengenerator ermöglicht eine effiziente Entwicklung, ohne dass bei jeder Änderung manuell eine Seite erstellt und bereitgestellt werden muss.
Beheben Sie häufige Live-Server-Probleme
Obwohl die Live Server-Erweiterung im Allgemeinen zuverlässig ist, können dennoch einige Probleme auftreten. Beispielsweise kann es sein, dass der Live-Server nicht startet, das Live-Neuladen nicht mehr funktioniert oder CORS-Probleme auftreten.
Live Server kann nicht gestartet werden
Dies kann passieren, wenn die Erweiterung falsch installiert ist. Wenn ja, können Sie:
- Stellen Sie sicher, dass die Erweiterung ordnungsgemäß installiert und aktiviert ist. Wenn Sie vergessen haben, es zu aktivieren oder es versehentlich deaktiviert haben, aktivieren Sie es, um das Problem zu beheben.
- Wenn Sie ein Installationsproblem vermuten, versuchen Sie, die Erweiterung erneut zu installieren.
- Überprüfen Sie Ihre Einstellungen und stellen Sie sicher, dass Ihr Arbeitsbereichsordner verfügbar, konfiguriert und nicht in einer anderen Instanz geöffnet ist.
Live-Reload funktioniert nicht
Wenn das Live-Neuladen nicht ordnungsgemäß funktioniert, können Sie Folgendes versuchen:
- Überprüfen Sie noch einmal Ihre Dateitypen und die Dateitypunterstützung.
- Stellen Sie sicher, dass die Erweiterung Änderungen ordnungsgemäß verfolgt und Dateien, die Änderungen erhalten sollen, nicht ignoriert. Überprüfen Sie Einstellungen wie „liveServer.settings.ignoreFiles“.
Probleme bei der Ressourcenfreigabe mit mehreren Quellen
Beim Umgang mit Ressourcen unterschiedlicher Herkunft können CORS-Probleme auftreten. So beheben Sie diese Probleme:
- Erlauben Sie Cross-Origin-Anfragen auf Ihrem Server.
- Verwenden Sie einen lokalen Entwicklungsserver.
Live Server kann keine Browser-Registerkarten öffnen
Wenn Live Server in Ihrem Standardbrowser keine Browser-Registerkarten öffnen kann, versuchen Sie, die Einstellungen anzupassen:
- Überprüfen Sie Ihren Standard-Webbrowser.
- Passen Sie die Serverbrowsereinstellungen in VS Code an. Wenn Sie die Live-Freigabe aktivieren, müssen Sie über die Befehlspalette eine Zusammenarbeitssitzung starten.
Erweiterte Live-Server-Funktionen
Live Server bietet einige weniger bekannte, aber durchaus praktische Zusatzfunktionen. Eine erwähnenswerte „versteckte“ Funktion ist die Kompatibilität mit Präprozessoren wie Sass, Less oder TypeScript, um Ihren Code automatisch zu kompilieren und Vorschauen zu aktualisieren. Live Server kann auch mit Tools und Bibliotheken von Drittanbietern wie Frameworks und Build-Systemen integriert werden.
Erkunden Sie die Live-Server-Einstellungen und die Dokumentation, um relevante Integrationen zu identifizieren, die Ihrem Pool helfen können.
Optimierung der Live-Serverleistung
Es können verschiedene Optimierungen vorgenommen werden, um Live Server zu verbessern.
Überfüllung vermeiden
Eine Möglichkeit, den optimalen Betrieb Ihres Servers aufrechtzuerhalten, besteht darin, Einstellungen so zu konfigurieren, dass unnötige Neuladevorgänge vermieden werden. Sie können beispielsweise die Option „liveServer.settings.ignoreFiles“ festlegen, um zu definieren, welche Dateien oder Ordner keinen Live-Neuladen auslösen sollen. Durch die Begrenzung der Datenmenge, die neu geladen werden kann, wird die Aktualisierungshäufigkeit verringert und Systemressourcen geschont.
Erhöhen Sie die Aktualisierungsverzögerung
Passen Sie die Aktualisierungsverzögerung Ihres Browsers genau an, um mehr Leistung aus Ihrem Server herauszuholen. Passen Sie dazu die Servereinstellung „liveServer.settings.wait“ an. Das manchmal auftretende schnelle Neuladen beim Speichern mehrerer aufeinanderfolgender Dateien kann die Ressourcen Ihres Systems belasten. Das Erhöhen der Verzögerung über „liveServer.settings.wait“ hilft, dieses potenzielle Problem zu vermeiden.
Schließen Sie nicht verwendete Instanzen
Erwägen Sie schließlich das Herunterfahren ungenutzter Live Server-Instanzen, um die Leistung bei der Arbeit an mehreren Projekten zu vereinfachen. Das gleichzeitige Offenhalten mehrerer Instanzen kann je nach Hardware erhebliche Systemressourcen verbrauchen.
Live-Server-Tipps
Probieren Sie einige praktische Tipps aus, um Live Server optimal zu nutzen:
Halten Sie Entwicklungs- und Produktionsumgebungen getrennt
Ein Tipp, den andere Entwickler vielleicht weitergeben möchten, ist, Ihre Entwicklungsumgebung von Ihrer Produktionsumgebung getrennt zu halten. Diese Trennung hilft Ihnen, die versehentliche Bereitstellung von unfertigem oder ungetestetem Code zu vermeiden, wodurch Ihr Code sauberer bleibt und wertvolle Zeit gespart wird.
Nutzen Sie separate Arbeitsbereiche für mehrere Projekte
Wenn Sie an mehreren Projekten gleichzeitig arbeiten, verwenden Sie separate Arbeitsbereiche in VS Code, um Ihre Projekte organisiert zu halten. Mit diesem Ansatz können Sie problemlos zwischen Projekten wechseln und die jeweiligen Live-Server-Instanzen verwalten.
Bessere Zusammenarbeit mit Live Share und Live Server
Die Live Share- und Live Server-Erweiterungen verbessern außerdem Ihre Zusammenarbeit mit anderen Entwicklern. Mit dieser Einstellung können Sie Ihren Arbeitsbereich und Ihre Live-Ansicht mit anderen teilen. Es ist der optimale Ansatz für Teams, die gemeinsam an Projekten arbeiten und Probleme in Echtzeit lösen.
Zusätzliche häufig gestellte Fragen
Was ist Live Server in Visual Studio Code?
Live Server ist eine beliebte VS-Code-Erweiterung, die eine Vorschau von HTML-, CSS- und JavaScript-Dateien in Echtzeit anzeigt.
Wie kann ich den Live-Server stoppen?
Um den Server zu stoppen, öffnen Sie die Befehlspalette und geben Sie „Live Server: Live Server stoppen“ ein.
Warum funktioniert der Live-Server nicht?
Mögliche Gründe für dieses Problem sind eine falsche Erweiterungsinstallation, eine falsche Projekteinstellung oder eine Firewall oder ein Proxy, die den Server blockieren.
Kann ich Live Server mit Microsoft Edge DevTools in VS Code verwenden?
Sie können Live Server in Kombination mit Microsoft Edge verwenden. Installieren Sie dazu die Live Server- und Edge DevTools-Erweiterungen für Visual Studio Code.
Treten Sie dem Live-Chat (Server) bei.
Die Live Server-Erweiterung in Visual Studio Code ist ein unverzichtbares Werkzeug für moderne Entwickler, das ihnen hilft, ihren Arbeitsablauf zu optimieren und erstklassige Projekte zu veröffentlichen. Eliminiert unnötige Browseraktualisierungen und ermöglicht die Zusammenarbeit in Echtzeit durch die gemeinsame Nutzung von Arbeitsbereichen und Ansichten.
Was halten Sie von dieser Erweiterung? Welche Tipps und Tricks fanden Sie besonders nützlich? Lassen Sie es uns in den Kommentaren wissen – es könnte anderen Entwicklern sehr helfen.