So öffnen Sie mit Live Server in VS Code

Live Server, eine Visual Studio (VS) Code-Erweiterung, 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. Es ist besonders praktisch für Webentwickler, die mit HTML, CSS und JavaScript arbeiten.

In diesem Tutorial wird erklärt, wie Sie das Tool einrichten, anpassen und mit verschiedenen Dateitypen verwenden und einige häufige Probleme beheben, auf die ein Entwickler bei der Verwendung stoßen kann.

Öffnen eines Projekts mit Live Server in VS Code

Ohne den Live-Server müssen Sie den Browser jedes Mal, wenn Sie Ihren Code ändern oder Inhalte hinzufügen, manuell aktualisieren, damit die Aktualisierungen angezeigt werden. Um dies ins rechte Licht zu rücken: Wenn Sie 100 Änderungen pro Tag vornehmen, müssen Sie den 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:

1. Installieren Sie die Live Server-Erweiterung vom Marketplace. Sie finden es in der VS Code-Aktivitätsleiste.

   

2. Öffnen Sie Ihr Projekt, indem Sie je nach Wunsch entweder auf „Datei“ und „Datei öffnen“ klicken oder Tastaturkürzel verwenden.

   

3. Klicken Sie mit der rechten Maustaste auf eine HTML-Datei im Projekt und wählen Sie im Kontextmenü „Mit Live-Server öffnen“.

   

In einem neuen Browserfenster wird die Live-Site angezeigt. Alle Änderungen, die Sie an den Projektdateien vornehmen, werden automatisch im Browser aktualisiert.

Anpassen der Live-Server-Einstellungen in VS Code

Um die Live Server-Erweiterung optimal zu nutzen, probieren Sie verschiedene Anpassungsoptionen aus, die in den Einstellungen verfügbar sind. Sie können unter anderem 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 einfach zu erreichen:

1. Suchen Sie die Zeile „liveServer.settings.port“ (der Standardportwert ist 5500).

   

2. Legen Sie für eine zufällige Portnummer den Wert 0 fest oder wählen Sie eine Nummer aus, die Sie verwenden möchten.

   

Aktivieren Sie HTTPS-Verbindungen

Aktivieren Sie HTTPS-Verbindungen für mehr Sicherheit, etwa so:

1. Suchen Sie die HTTPS-Protokollzeile „liveServer.settings.https“.

   

2. Ändern Sie den Wert „enable“ in „true“.

   

3. Geben Sie nach Bedarf die Dateipfade für Zertifikat, Schlüssel und Passphrase ein.

   

Konfigurieren Sie die Proxy-Einstellungen

Für bestimmte Szenarien kann die Konfiguration von Proxy-Einstellungen erforderlich sein. So richten Sie den Proxy ein:

1. Aktivieren Sie den Proxy mit „liveServer.settings.proxy“.

   

2. Ändern Sie „enable“ in „true“, falls dies noch nicht geschehen ist.

   

3. Legen Sie „baseUri“ für den gewünschten Proxy-Standort fest.

   

4. 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 wesentlich effizienter macht. Diese Tool-Kombination zeigt gleichzeitig Änderungen in Echtzeit an und ermöglicht den direkten Zugriff auf Entwicklertools.

1. Installieren Sie die Live Server-Erweiterung für Visual Studio Code vom VS Code Marketplace.

   

2. Installieren Sie die Edge DevTools-Erweiterung für VS Code aus derselben Quelle, indem Sie nach „Microsoft Edge Tools für VS Code“ suchen.

   

3. Verwenden Sie die integrierten Browser-Entwicklertools, 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.

Verwenden eines Live-Servers 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 der Ä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-Programmierer ist es einfach, Fehler und Fehler zwischen verschiedenen Dateien zu erkennen.

Der 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.

Der Live Server ist mit statischen Site-Generatoren wie Jekyll und Hugo kompatibel. Sie ermöglichen es Ihnen, die Ausgabe Ihrer statischen Site anzuzeigen und schnell zu ändern. Die Integration von Live Server mit einem statischen Site-Generator ermöglicht eine effiziente Entwicklung, ohne dass die Site jedes Mal manuell erstellt und bereitgestellt werden muss, wenn Sie Änderungen vornehmen.

Fehlerbehebung bei häufigen Live-Server-Problemen

Obwohl die Live Server-Erweiterung im Allgemeinen zuverlässig ist, können dennoch einige Probleme auftreten. Beispielsweise könnte der Start des Live-Servers fehlschlagen, das Live-Neuladen funktioniert möglicherweise nicht mehr oder es könnten CORS-Probleme auftreten.

Live-Server startet nicht

Dies kann passieren, wenn die Erweiterung nicht ordnungsgemäß installiert wurde. Wenn ja, können Sie:

• Stellen Sie sicher, dass die Erweiterung korrekt 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 zugänglich, konfiguriert und nicht in einer anderen Instanz geöffnet ist.

Das Live-Neuladen funktioniert nicht

Wenn das Live-Neuladen nicht ordnungsgemäß funktioniert, können Sie Folgendes versuchen:

• Überprüfen Sie Ihre Dateitypen und die Dateitypunterstützung noch einmal.
• Stellen Sie sicher, dass die Erweiterung Änderungen korrekt verfolgt und die Dateien, die Änderungen erhalten sollen, nicht ignoriert. Überprüfen Sie Einstellungen wie „liveServer.settings.ignoreFiles“.

Probleme bei der ursprungsübergreifenden Ressourcenfreigabe

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 Browser-Registerkarten nicht ö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 Browsereinstellungen des Servers in VS Code an. Wenn Sie die Live-Freigabe aktivieren, müssen Sie über die Befehlspalette eine Zusammenarbeitssitzung starten.

Erweiterte Live-Server-Funktionen

Der Live Server bietet einige weniger bekannte, aber eher 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 die Vorschau 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 die relevanten Integrationen zu identifizieren, die Ihren Stack unterstützen können.

Optimierung der Live-Serverleistung

Es gibt ein paar Optimierungen, um die Leistung von Live Server zu verbessern.

Vermeiden Sie übermäßiges Nachladen

Eine Möglichkeit, die optimale Leistung des Servers zu erzielen, besteht darin, die Einstellungen so zu konfigurieren, dass übermäßige Neuladevorgänge vermieden werden. Sie können beispielsweise die Option „liveServer.settings.ignoreFiles“ anpassen, um zu definieren, welche Dateien oder Ordner kein Live-Neuladen auslösen sollen. Durch die Begrenzung der Datenmenge, die für ein Neuladen in Frage kommt, wird die Aktualisierungshäufigkeit verringert und Systemressourcen geschont.

Erhöhen Sie die Aktualisierungsverzögerung

Passen Sie die Aktualisierungsverzögerung des Browsers genau an, um mehr Leistung aus Ihrem Server herauszuholen. Passen Sie dazu die Servereinstellung „liveServer.settings.wait“ an. Schnelle Neuladevorgänge, die manchmal beim Speichern mehrerer aufeinanderfolgender Dateien auftreten, können die Ressourcen Ihres Systems belasten. Das Erhöhen der Verzögerung durch „liveServer.settings.wait“ trägt dazu bei, dieses potenzielle Problem in Schach zu halten.

Schließen Sie nicht verwendete Instanzen

Erwägen Sie schließlich das Schließen ungenutzter Live Server-Instanzen, um bei der Arbeit an mehreren Projekten einen einfacheren Leistungsvorteil zu erzielen. Das gleichzeitige Offenhalten mehrerer Instanzen kann je nach Hardware erhebliche Systemressourcen verbrauchen.

Live-Server-Tipps

Um den Live-Server optimal zu nutzen, probieren Sie einige praktische Tipps aus:

Halten Sie Entwicklungs- und Produktionsumgebungen getrennt

Ein Tipp, den andere Entwickler möglicherweise geben, besteht darin, Ihre Entwicklungsumgebung von Ihrer Produktionsumgebung zu trennen. Diese Trennung hilft Ihnen, die versehentliche Bereitstellung von unfertigem oder ungetestetem Code zu vermeiden, wodurch Ihr Code sauberer bleibt und wertvolle Zeit gespart wird.

Verwenden 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. Dieser Ansatz ermöglicht Ihnen den einfachen Wechsel zwischen Projekten und die Verwaltung der jeweiligen Live-Server-Instanzen.

Bessere Zusammenarbeit mit Live Share und Live Server

Die Live Share- und Live Server-Erweiterungen verbessern außerdem Ihre Zusammenarbeit mit anderen Entwicklern. Mit diesem Setup können Sie Ihren Arbeitsbereich und die Live-Vorschau mit anderen teilen. Dies ist ein optimaler Ansatz für Teams, die gemeinsam an Projekten arbeiten und Probleme in Echtzeit beheben.

Zusätzliche FAQs

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 stoppe ich Live Server?

Um einen Server zu stoppen, öffnen Sie die Befehlspalette und geben Sie „Live Server: Live Server stoppen“ ein.

Warum läuft Live Server nicht?

Mögliche Gründe für dieses Problem sind eine unsachgemäße Installation der Erweiterung, eine falsche Projekteinrichtung 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 Verbindung mit Microsoft Edge verwenden. Installieren Sie dazu die Live Server- und Edge DevTools-Erweiterungen für Visual Studio Code.

Nehmen Sie an der Live-(Server-)Konversation teil

Die Live Server-Erweiterung in Visual Studio Code ist ein unverzichtbares Tool für moderne Entwickler, das ihnen hilft, den Workflow zu optimieren und erstklassige Projekte zu veröffentlichen. Es macht unnötige Browseraktualisierungen überflüssig und ermöglicht die Zusammenarbeit in Echtzeit durch die gemeinsame Nutzung von Arbeitsbereichen und Vorschauen.

Was denken Sie über diese Erweiterung? Welche Tipps und Tricks haben Ihnen besonders geholfen? Lassen Sie es uns in den Kommentaren wissen – es könnte anderen Programmierern sehr helfen.