Beispielcode für DevTools

Verwenden Sie das Demos-Repository , um zu erfahren, wie Sie Microsoft Edge zum Entwickeln von Webseiten und Web-Apps verwenden. Es gibt verschiedene Möglichkeiten zum Anzeigen, Herunterladen und Ändern dieser Demo-Webseiten, einschließlich:

• DevTools in Microsoft Edge.
• Visual Studio Code mit optionalen DevTools.
• Visual Studio mit optionalen DevTools.

So zeigen Sie den Quellcode für eine gerenderte Demowebseite in DevTools in Microsoft Edge an:

1. Klicken Sie auf einer Infodateiseite auf den Link Demo . Die Liveseite wird in Microsoft Edge geöffnet.

2. Klicken Sie mit der rechten Maustaste auf die Demo-Webseite, und wählen Sie dann Untersuchen aus, um DevTools zu öffnen.

Liste der DevTools-Beispiele

Die folgenden Demos veranschaulichen DevTools-Features.

Einige dieser Beispiele sind unten dargestellt.

To Do-Demo

Diese einfache To-Do-Listenwebseite wird verwendet, um verschiedene DevTools-Features zu veranschaulichen. Es enthält eine .html Datei, eine .js Datei und .css Dateien:

• Gerenderte Seite: TODO-App

• Quellcode: demo-to-do

Demowebseite mit Barrierefreiheitsproblemen

Diese Demo-Webseite für Tierheime ist nützlich, um verschiedene DevTools-Features zu erkunden, einschließlich Features für Barrierefreiheitstests.

1. Öffnen Sie die Demo-Webseite mit Barrierefreiheitsproblemen in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der gerenderten Webseite, und wählen Sie dann Untersuchen aus. DevTools wird neben der Demo-Webseite geöffnet.

Artikel

Diese Artikel führen Sie durch die Verwendung dieser Demo-Webseite:

• Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen . Einer von mehreren kurzen Artikeln, die aus Abschnitten des obigen Artikels abgeleitet sind.

• Features für Barrierefreiheitstests : Eine Liste der Features für Barrierefreiheitstests von DevTools mit Links zu mehreren Artikeln, die die "Demo-Webseite mit Barrierefreiheitsproblemen" verwenden.

Quellcoderepository

Dies ist das Quellcoderepository und sein Verzeichnis, in dem die Dateien für diese Demowebseite gespeichert werden:

• MicrosoftEdge/Demos > devtools-a11y-testing : Enthält Dateien wie:

  • index.html – Die Demowebseite, einschließlich Seitenabschnitte und Eingabeformulare, die Daten an die buttons.js JavaScript-Datei senden. Um die gerenderte Webseite anzuzeigen, verwenden Sie den obigen Link zur Demo-Webseite.

  • buttons.js – Enthält den JavaScript-Code, der von der Demo-Webseite verwendet wird.

  • styles.css, light-theme.cssund dark-theme.css - CSS-Dateien, die die Darstellung der Demowebseite steuern.

  • Bilddateien, die auf der Demo-Webseite verwendet werden.

Demo-Webseite: Debuggen von JavaScript mit DevTools

Diese Demo-Webseite ist nützlich, um das Quellentool , insbesondere den JavaScript-Debugger, zu erkunden.

1. Öffnen Sie die Demo-Webseite Erste Schritte Debuggen von JavaScript mit DevTools in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der gerenderten Webseite, und wählen Sie dann Untersuchen aus. DevTools wird neben der Demo-Webseite geöffnet.

Artikel

Diese Artikel oder Artikelabschnitte führen Sie durch die Verwendung dieser Demo-Webseite:

• Der grundlegende Ansatz für die Verwendung eines Debuggers in der Übersicht über das Quellentool. Dieser Artikelabschnitt führt Sie kurz durch die Schritte zur Verwendung des JavaScript-Debuggers im Quellentool , um den Fehler auf der Demo-Webseite zu finden. Um den Fehler zu beheben, konvertieren Sie die Eingabezeichenfolgen in Zahlen, bevor Sie sie hinzufügen.

• Erste Schritte beim Debuggen von JavaScript : Eine ausführlichere exemplarische Vorgehensweise zur Verwendung der Demo-Webseite zusammen mit dem Debugger, zur Veranschaulichung verschiedener Features des Debuggers und zum Festlegen verschiedener Arten von Haltepunkten.

Quellcoderepository

Dies ist das Quellcoderepository und sein Verzeichnis, in dem die Dateien für diese Demowebseite gespeichert werden:

• MicrosoftEdge/Demos > devtools-js-get-started : Enthält die Dateien:

  • README.md – Enthält Links zur gerenderten Demo-Webseite und zum ausführlichen Tutorialartikel zur Verwendung der Demo-Webseite.

  • index.html – Die Webseite mit einem Eingabeformular, das Daten an die JavaScript-Datei sendet und das Ergebnis des JavaScript anzeigt.

  • get-started.js – Die JavaScript-Datei, die vom Formular auf der Demo-Webseite verwendet wird.

Klonen des Edge-Demos-Repositorys auf Ihrem Laufwerk

Das Microsoft Edge/Demos-Repository ist nützlich, um die verschiedenen DevTools-Dokumentationen zu befolgen. Sie können das Repository klonen, einen localhost-Webserver in einem Ordner des geklonten Repositorys starten und die Demodateien dann direkt in DevTools oder in einem Editor wie VS Code bearbeiten.

Das Klonen des Repositorys wird gegenüber dem Herunterladen des Repositorys empfohlen, damit Sie Updates des Repositorys abrufen und vollständig am Repository teilnehmen können.

So klonen Sie das MicrosoftEdge/Demos-Repository auf Ihrem lokalen Laufwerk:

1. Geben Sie in einer Eingabeaufforderung ein git , um zu überprüfen, ob Git installiert ist.

2. Falls noch nicht geschehen, laden Sie Git herunter , und installieren Sie es.

3. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu MicrosoftEdge/Demos .

4. Klicken Sie auf die Dropdownschaltfläche Code und dann auf die Schaltfläche URL in Zwischenablage kopieren .

   Die URL wird in die Zwischenablage kopiert: https://github.com/MicrosoftEdge/Demos.git

   Wenn Sie GitHub Desktop installiert haben, klicken Sie auf Mit GitHub Desktop öffnen , um das Repository zu klonen, und überspringen Sie den folgenden Eingabeaufforderungsschritt.

5. Öffnen Sie eine Eingabeaufforderung, z. B. Git Bash.

6. Klonen Sie das Repository auf Ihr lokales Laufwerk, und geben Sie die URL-Zeichenfolge ein, die Sie aus dem GitHub-Repository kopiert haben. Wenn Sie eine Eingabeaufforderung verwenden:

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Ausführliche Informationen zum Klonen eines Repositorys finden Sie unter:

• Klonen eines Repositorys : GitHub-Dokumentation.

Fahren Sie mit dem nächsten Abschnitt fort.

Klonen des Edge-Demos-Repositorys auf Ihrem Laufwerk mithilfe von VS Code

So klonen Sie das MicrosoftEdge/Demos-Repository auf Ihrem lokalen Laufwerk:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu MicrosoftEdge/Demos .

2. Klicken Sie auf die Dropdownschaltfläche Code , und klicken Sie dann auf Mit Visual Studio öffnen , wenn sie angezeigt wird. Es wird eine Liste von Handlerauswahlelementen angeboten, eines pro Visual Studio instance installiert. Diese Option wird nur angezeigt, wenn Sie angemeldet sind.

   

3. Klicken Sie in Visual Studio Code in der Aktivitätsleiste auf die Schaltfläche Quellcodeverwaltung () und dann auf die Schaltfläche Repository klonen .

4. Fügen Sie im Textfeld Repository-URL angeben die kopierte URL ein, https://github.com/MicrosoftEdge/Demos.git und drücken Sie dann die EINGABETASTE. Ein Dialogfeld zur Ordnerauswahl wird geöffnet.

   

5. Navigieren Sie zum gewünschten Pfad, z C:\Users\localAccount\Documents\GitHub . B. oder Users/username/GitHub, und klicken Sie dann auf die Schaltfläche Repositoryspeicherort auswählen .

6. Die Meldung Git-Repository klonen wird angezeigt, und Sie werden aufgefordert, das geklonte Repository zu öffnen. Klicken Sie auf die Schaltfläche Öffnen :

   

7. Klicken Sie auf die Schaltfläche Ja, wenn Sie gefragt werden, ob Sie vertrauen... Oder klicken Sie auf die Schaltfläche Nein , und fahren Sie mit den meisten Teilen dieser exemplarischen Vorgehensweise fort.

   Die Explorer Struktur enthält viele Demos, einschließlich Demo-to-do.

Siehe auch:

• Klonen eines Repositorys : GitHub-Dokumentation.
• Klonen Sie das WebView2Samples-Repository unter Einrichten Ihrer Entwicklungsumgebung für WebView2.

Tools, die das Klonen eines Repositorys und Git-Commit-/Pull-/Pushvorgänge unterstützen

Das Klonen eines Repositorys ermöglicht das Aktualisieren Ihrer lokalen Kopie, wenn das Repository aktualisiert wird. Viele Tools unterstützen das Klonen und Synchronisieren mit einem GitHub-Repository, z. B.:

• Git-Befehle an einer Eingabeaufforderung, z. B. der Shell "git bash". Dies ist der wichtigste Weg, der hier dokumentiert ist.

• GitHub Desktop. Lässt sich gut in GitHub-Repositorys und Pull Requests sowie in VS Code integrieren.

• Visual Studio Code. Klicken Sie in der Aktivitätsleiste auf der linken Seite auf Quellcodeverwaltung.

• Registerkarte "Git-Änderungen" von Visual Studio > neben der Registerkarte Projektmappen-Explorer unten rechts.

• Die "Punktschlüssel"-Version von VS Code im Edge-Browser. Drücken Sie bei Github.com beim Anzeigen einer Verzweigung oder eines Pull Requests (PR) die Punkttaste (.). Klicken Sie links in der Aktivitätsleiste auf Folgendes:

  • Quellcodeverwaltung
  • GitHub-Pull Requests
  • GitHub Pull Request

Herunterladen des Demos-Repositorys

Das Klonen des Repositorys wird gegenüber dem Herunterladen des Repositorys empfohlen, damit Sie Updates des Repositorys abrufen und vollständig am Repository teilnehmen können.

Wenn Sie nur das Demos-Repository herunterladen möchten, anstatt es zu klonen:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zum Repository MicrosoftEdge/Demos .

2. Klicken Sie auf die Dropdownschaltfläche Code und dann auf ZIP herunterladen.

   Die .zip Datei wird in Ihrem Downloadverzeichnis abgelegt. Entzippen Sie diese Webseitenquelldateien an einem geeigneten Speicherort.

So laden Sie ein einzelnes Verzeichnis des Demos-Repositorys herunter:

1. Wechseln Sie zu , https://download-directory.github.io/ und fügen Sie dann die URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-doein.

   Die .zip Datei wird in Ihrem Downloadverzeichnis abgelegt. Entzippen Sie diese Webseitenquelldateien an einem geeigneten Speicherort.

Siehe auch:

• Laden Sie das WebView2Samples-Repository unter Einrichten Ihrer Entwicklungsumgebung für WebView2 herunter.

Öffnen eines Demoordners über die Registerkarte Arbeitsbereich im Tool Quellen

Um diesen Abschnitt zu verwenden, führen Sie zuerst Klonen des Edge-Demos-Repositorys auf Ihr Laufwerk weiter oben aus.

Siehe auch:

• Arbeitsbereichstutorial (Registerkarte "Quellentool Arbeitsbereich")
• Ansätze, die in der Microsoft Edge DevTools-Erweiterung für Visual Studio Code verglichen werden. Fasst mehrere Optionen zum Bearbeiten von Webseitendateien zusammen und vergleicht sie.

Nach dem Klonen (oder Herunterladen) des Edge-Demos-Repositorys:

1. Öffnen Sie in Microsoft Edge eine neue Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Hauptsymbolleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten ().

4. Wählen Sie auf der Registerkarte Quellen auf der linken Seite die Registerkarte Arbeitsbereich aus, die mit der Registerkarte Seite gruppiert ist. Wenn die Registerkarte Arbeitsbereich nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten ().

5. Klicken Sie auf + Ordner zum Arbeitsbereich hinzufügen. Ein Dialogfeld zur Ordnerauswahl wird geöffnet.

6. Wählen Sie einen bestimmten Ordner aus, z. B. demo-to-do, oder wählen Sie den Stammordner Demos aus:

   

7. Oberhalb von DevTools werden Sie dazu aufgefordert, "DevTools fordert Vollzugriff auf (Verzeichnis)" an. Klicken Sie auf die Schaltfläche Zulassen :

   

Starten des localhost-Servers

Wenn Sie den localhost-Server aus einem bestimmten Demoordner wie \Demos\demo-to-dostarten und dann zu localhost:8080 wechseln (oder einfach die lokale Datei wie C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html in Microsoft Edge öffnen), wird die spezifische Demo sofort im Browser angezeigt. Anschließend können Sie der Registerkarte Arbeitsbereich des Tools Quellen nur das bestimmte Demoverzeichnis hinzufügen, zC:\Users\localAccount\GitHub\Demos\demo-to-do\. B. . Anschließend verfügen Sie über vollständige Funktionen für die Verwendung von DevTools als IDE für diese spezifische Demo.

Starten des Servers in einem bestimmten Demoverzeichnis:

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

Beispielverzeichnis, das der Registerkarte Arbeitsbereich des Tools Quellen hinzugefügt werden soll: C:\Users\localAccount\GitHub\Demos\demo-to-do

Ergebnis des Wechsels zu localhost:8080:

Starten des localhost-Servers aus dem Demos-Verzeichnis

Wenn Sie den localhost-Server innerhalb des gesamten \Demos\ Ordners starten und dann zu localhost:8080wechseln, können Sie im Browser zu jeder Demo navigieren. Sie können den gesamten geklonten /Demos/ Ordner der Registerkarte Arbeitsbereich des Quellentools hinzufügen. Anschließend verfügen Sie über vollständige Funktionen für die Verwendung von DevTools als IDE.

Starten des Servers aus dem gesamten \Demos\ Verzeichnis:

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

Beispielverzeichnis, das der Registerkarte Arbeitsbereich des Tools Quellen hinzugefügt werden soll: C:\Users\localAccount\GitHub\Demos

Ergebnis des Wechsels zu localhost:8080:

Öffnen einer lokalen HTML-Datei aus Explorer und Bearbeiten in DevTools

Um Dateien im Quellentool zu bearbeiten, müssen Sie vor den Schritten in diesem Abschnitt möglicherweise auf die Schaltfläche Zulassen klicken, um Lese-/Schreibzugriff zu gewähren, indem Sie die Schritte unter Öffnen eines Demoordners über die Registerkarte Arbeitsbereich im Tool Quellen oben ausführen.

1. Wählen Sie in Explorer unter Windows oder finder unter macOS eine HTML-Datei aus der lokalen Kopie des Demos-Repositorys aus, zC:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. B. .

   Die .html Datei wird in Microsoft Edge geöffnet und gerendert.

   Auf der Adressleiste wird Folgendes angezeigt: Datei | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   Wenn Sie die URL in der Adressleiste auswählen, wird das URL-Format angezeigt: file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

2. Klicken Sie mit der rechten Maustaste auf die gerenderte Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie das Tool Quellen und dann die Registerkarte Seite oder die Registerkarte Arbeitsbereich aus.

Siehe auch:

• Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte "Quellentool", Registerkarte "Arbeitsbereich") , um einen lokalen Ordner im Quellentool von DevTools im Browser zu öffnen.

Öffnen einer lokalen HTML-Datei über das Dialogfeld "Datei öffnen" des Browsers und Bearbeiten der Datei in DevTools

So öffnen Sie eine .html Datei und bearbeiten sie:

1. Öffnen Sie in Microsoft Edge eine neue Registerkarte, und drücken Sie dann STRG+O (Windows/Linux) oder BEFEHL+O (macOS). Ein Dateiauswahldialogfeld wird geöffnet.

2. Wählen Sie eine HTML-Datei aus der lokalen Kopie des Demos-Repositorys aus, z C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. B. . Die .html Datei wird in Microsoft Edge geöffnet und gerendert.

3. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

4. Wählen Sie in DevTools auf der Hauptsymbolleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten ().

5. Wählen Sie in DevTools auf der linken Seite die Registerkarte Seite und dann die HTML-Datei aus, zindex.html. B. oder (Index).

6. Drücken Sie ESC , um den Bereich Schnellansicht am unteren Rand von DevTools zu öffnen.

7. Klicken Sie auf der Symbolleiste der Schnellansicht auf die Schaltfläche Weitere Tools (), und wählen Sie dann das Tool Änderungen aus.

8. Bearbeiten Sie im mittleren Editor-Bereich des Tools Quellen die .html Datei. Ändern Sie beispielsweise im demo-to-do/index.html Ordner in der Überschriftenzeile<h1> Meine Aufgaben in Meine geänderten Aufgaben:

   <h1>📋 My modified tasks</h1>
   

   Wenn die Bearbeitung nicht aktiviert ist, klicken Sie auf die Schaltfläche Zulassen , um Lese-/Schreibzugriff auf den Ordner zu gewähren. Führen Sie dazu die Schritte unter Öffnen eines Demoordners über die Registerkarte Arbeitsbereich im Obigen Tool Quellen aus .

   Die Änderung wird im Tool Änderungen im Bereich Schnellansicht angezeigt, und dem Dateinamen auf der Registerkarte index.html im Tool Quellen wird ein Sternchen hinzugefügt:

   

9. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um die Änderung zu speichern. Das Sternchen wird von der Registerkarteindex.html im Tool Quellen entfernt.

10. Aktualisieren Sie die Seite. Die Änderung wird auf der gerenderten Webseite angezeigt. Beispielsweise wird das geänderte Wort dem Titel hinzugefügt:

    

Öffnen eines Demoordners in Visual Studio Code

Nach dem Klonen (oder Herunterladen) des Edge-Demos-Repositorys:

1. Klicken Sie in Visual Studio Code auf der Aktivitätsleiste auf die Schaltfläche Explorer (). Der bereich Explorer wird geöffnet.

2. Klicken Sie im bereich Explorer auf die Schaltfläche Ordner öffnen. Das Dialogfeld Ordner öffnen wird geöffnet. Navigieren Sie zu dem demo-to-do Ordner im Demorepository, das Sie geklont haben, wählen Sie den Ordner aus, oder wechseln Sie zu diesem Ordner, und klicken Sie dann auf die Schaltfläche Ordner auswählen :

   

   Ein Beispiel für einen Repositoryspeicherort, an dem das Demos-Repository geklont wurde, ist oben dargestellt. Der demo-to-do Ordner des geklonten Demos-Repositorys wird im Explorer von Visual Studio Code geöffnet:

   

Alternativ können Sie den Stammordner des Demos-Repositorys öffnen, um alle Demoordner im bereich Explorer zu erkunden.

Siehe auch:

• Microsoft Edge DevTools-Erweiterung für Visual Studio Code zum Öffnen eines lokalen Ordners in Visual Studio Code und Verwenden von DevTools in Visual Studio Code.

URL-Muster für gerenderte Demowebseiten und Quellcode

Die meisten Infodateien im Demos-Repository enthalten einen Link, über den die gerenderte .html Datei vom GitHub.io-Server geöffnet wird. Manchmal haben Sie eine URL für eine HTML-Quelldatei am GitHub.com. Stattdessen müssen Sie die github.io Server-URL ableiten, um die gerenderte Datei anzuzeigen, anstatt die Codeliste des .html Quellcodes im GitHub-Verzeichnis anzuzeigen.

Um von der URL für das Quellcodeverzeichnis unter GitHub.com in die URL für eine gerenderte Demowebseite um GitHub.io zu konvertieren, sieht das Muster wie folgt aus.

Angenommen, die URL für den Quellcode der Webseite unter GitHub.com lautet:

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

Die wichtigsten Komponenten dieser GitHub.com URL sind:

• https://github.com/[org]/[repo]/tree/main/[path]

Im Gegensatz dazu ist das gewünschte GitHub.io URL-Muster:

• https://[org].github.io/[repo]/[path]

Um dieses GitHub.io URL-Muster auszufüllen, gehen Sie in diesem Beispiel wie folgt vor:

• [org] ist MicrosoftEdge.
• [Repository] ist Demos.
• [pfad] ist demo-to-do.

Daher lautet die resultierende GitHub.io Server-URL für die gerenderte Demowebseite:

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

Bei diesen URLs wird die Groß-/Kleinschreibung nicht beachtet.

Wenn Sie einen localhost-Server ausführen und ihn in einem geklonten Repositoryordner starten, z C:\Users\localAccount\GitHub\Demos\workspaces. B. , wird localhost:8080 in der Regel in der Adressleiste des Browsers angezeigt.

Weitere Informationen

Öffnen und Bearbeiten von Dateien:

• Bearbeiten und Speichern von Dateien in einem Arbeitsbereich (Registerkarte Quellentool Arbeitsbereich): Verwenden Sie DevTools als integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) im Browser.
• Fügen Sie dem Arbeitsbereich einen lokalen Ordner hinzu, um Mit DevTools Dateien zu bearbeiten und Änderungen auf dem Datenträger in der Übersicht über quellentool zu speichern.
• Ansätze, die in der Microsoft Edge DevTools-Erweiterung für Visual Studio Code verglichen werden. Fasst mehrere Optionen zum Bearbeiten von Webseitendateien zusammen und vergleicht sie.
• Microsoft Edge-IDE-Integration : Webseiten-App-Entwicklung mit Visual Studio Code oder Visual Studio, einschließlich Microsoft Edge DevTools.

Herunterladen und Klonen:

• Schritt 5: Klonen Sie das Demos-Repository unter Installieren der DevTools-Erweiterung für Visual Studio Code.
• Klonen eines Repositorys : GitHub-Dokumentation.

Ausführen eines lokalen Webservers:

• Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.