Installieren der DevTools-Erweiterung für Visual Studio Code

  • Artikel

Dieser Artikel führt Sie durch die erste Einrichtung der DevTools-Erweiterung. Nach der Installation von DevTools können Sie die Schritte unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code ausführen.

Dieser Artikel hilft Ihnen:

  • Installieren Sie die DevTools-Erweiterung.

  • Klonen Sie das Demos-Repository, das die Demo-to-Do-Web-App enthält.

  • Starten Sie einen Webserver, damit Sie localhost-URLs in der DevTools-Erweiterung in Visual Studio Code verwenden können.

Schritt 1: Installieren von Visual Studio Code

  1. Wenn noch nicht geschehen, wechseln Sie in einem separaten Fenster oder einer separaten Registerkarte zu Visual Studio Code herunterladen , und laden Sie Visual Studio Code herunter, und installieren Sie es.

Schritt 2: Installieren von Microsoft Edge

Microsoft Edge ist für die DevTools-Erweiterung für Visual Studio Code erforderlich.

Unter Windows ist Microsoft Edge installiert. Installieren Sie Microsoft Edge unter macOS oder Linux wie folgt:

  1. Wechseln Sie Microsoft.com zur Seite Edge .

Schritt 3: Installieren der Microsoft Edge DevTools-Erweiterung

Installieren Sie die Microsoft Edge DevTools-Erweiterung für Visual Studio Code wie folgt:

  1. Öffnen Sie Visual Studio Code.

  2. Klicken Sie in der Aktivitätsleiste auf der linken Seite auf die Schaltfläche Erweiterungen (Symbol Erweiterungen). Oder drücken Sie STRG+UMSCHALT+X unter Windows/Linux oder BEFEHL+UMSCHALT+X unter macOS. Der Bereich Marketplace für Erweiterungen wird geöffnet.

  3. Geben Sie im Textfeld Search Extensions in Marketplace die Zeichenfolge Microsoft Edge Tools for VS Code ein.

  4. Wählen Sie die Microsoft Edge-Tools für VS Code aus, und klicken Sie dann auf die Schaltfläche Installieren :

    Installieren der Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Alternativ können Sie den Browser verwenden, um die Microsoft Edge DevTools-Erweiterung von der Visual Studio Marketplace-Website herunterzuladen. Wechseln Sie zu Microsoft Edge-Entwicklertools für Visual Studio Code.

Schritt 4: Installieren von Node.js und Node Package Manager (npm)

Sie müssen Node.js und den Node-Paket-Manager (npm) installieren, um eine Liveanalyse (Echtzeit) ihres Codes zu erhalten, um Probleme anzuzeigen, z. B. mit wellenförmigen Unterstreichungen, und schnelle Korrekturen anbieten zu können.

Die DevTools-Erweiterung zeigt einen Popupvorschlag zum Installieren von Node.js und npm an. Der Vorschlagstext ähnelt: "Installieren sie Node.js & npm? (empfohlen, weil Sie diese Erweiterung installiert haben)".

  1. Klicken Sie im Popup auf den Link, wenn er geöffnet wird.

  2. Installieren Sie Node.js und npm über Node.js> Downloads > LTS (langfristig stabil) (oder aktuell).

    Unter Windows wird eine .msi Datei heruntergeladen, z. B.: node-v18.17.1-x64.msi

  3. Klicken Sie im Bereich Downloads des Browsers auf Im Ordner anzeigen, und führen Sie dann die heruntergeladene Datei aus. Der Node.js Setup-Assistent wird geöffnet. Klicken Sie auf die Schaltfläche Weiter , und folgen Sie dann den Anweisungen. Sie können die Standardoptionen verwenden.

  4. Vergewissern Sie sich, dass Node.js und npm wie folgt installiert sind: Wählen Sie in Visual Studio CodeTerminalanzeigen> aus. Oder führen Sie die Git Bash-App aus.

  5. Geben Sie an der Eingabeaufforderung ein npm version. Versionsnummern werden für und für npmnodeangezeigt, die angeben, dass der Knotenpaket-Manager und Node.js installiert sind, um die Inline- und Live-Problemanalyse zu unterstützen. Zum Beispiel:

    $ npm version
{
   npm: '9.6.7',
   node: '18.17.1',
   ...
}

Siehe auch:

Schritt 5: Klonen des Demos-Repositorys

Das Klonen des Demos-Repositorys ist optional. Das Demos-Repository ist nützlich, um die verschiedenen DevTools-Dokumentationen zu befolgen. Wenn Sie möchten, können Sie anstelle des Klonens des Repositorys ein vorhandenes Projektverzeichnis öffnen, falls vorhanden.

Als weitere Alternative können Sie anstelle des Klonens des gesamten Verzeichnisses nur das Demo-to-Do-Verzeichnis herunterladen. Wechseln Sie beispielsweise 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. Im Tutorial Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code wird der Beispielspeicherort verwendet:

C:\Users\username\Documents\GitHub\Demos\demo-to-do\

So klonen Sie das Demos-Repository , um das Demo-to-Do-Beispiel für dieses Tutorial zu verwenden:

  1. Wechseln Sie zum MicrosoftEdge/Demos-Repository.

  2. Wenn die grüne Schaltfläche Code nicht angezeigt wird, klicken Sie im Pfad MicrosoftEdge-Demos / oben links auf Demos, um zur Standard Seite des Repositorys zu wechseln.

  3. Klicken Sie auf die grüne Schaltfläche Code , und wählen Sie dann die Schaltfläche Kopieren aus. In diesem Artikel wird davon ausgegangen, dass Sie die Quellcodeverwaltungsfeatures in Visual Studio Code verwenden. Oder Sie können eine der anderen bereitgestellten Methoden verwenden, wenn Sie wissen, dass Sie stattdessen diesen Ansatz verwenden möchten:

    • Mit GitHub Desktop öffnen
    • Öffnen mit Visual Studio
    • ZIP herunterladen

    Klonen des MicrosoftEdge/Demos-Repositorys

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

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

    Schaltfläche

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

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

    Aufgefordert, das geklonte Repository zu öffnen

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

  9. Wählen Sie in Visual Studio Code Datei>ordner schließen aus.

  10. Klicken Sie in der Aktivitätsleiste auf die Schaltfläche Microsoft Edge-Tools (Symbol Microsoft Edge Tools). Der Bereich Microsoft Edge-Tools wird geöffnet.

  11. Klicken Sie im BereichZiele der Microsoft Edge-Tools> 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 :

    Auswählen des Ordners

    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 in der Explorer von Visual Studio Code geöffnet, und es ist noch keine launch.json Datei vorhanden:

    Anfängliches Öffnen des Ordners

Schritt 6: Einrichten eines localhost-Servers

Wenn Sie Node.js und npm installiert haben, wie oben beschrieben, ist eine einfache Möglichkeit, npx http-server einen lokalen Webserver zu starten. Sie können mit den folgenden Schritten fortfahren oder diese Hintergrundinformationen zuerst lesen.

In vielen Fällen müssen Sie keine URL eingeben oder einen localhost-Server ausführen. Sie haben beispielsweise folgende Möglichkeiten:

  • Öffnen Sie einen Ordner, der Webseitenquelldateien enthält, und klicken Sie dann mit der rechten Maustaste auf eine .html Datei.
  • Geben Sie in der Adressleiste einen lokalen Dateipfad ein, z C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html . B. (Standardseite Erfolg).
  • Geben Sie in der Adressleiste der Registerkarte Edge DevTools: Browser eine Remoteserver-URL ein, z https://microsoftedge.github.io/Demos/demo-to-do/. B. .

Wenn Ihre Webseite bestimmte APIs verwendet, die erfordern, dass die Webseite auf einem Webserver ausgeführt wird, müssen Sie für die Verwendung von DevTools einen lokalen Webserver zu Testzwecken starten. Wenn Sie Ihr Projekt nicht auf einem Webserver bereitstellen, sondern nur lokale Dateien verwenden, können Sie DevTools weiterhin mit Debugfunktionen verwenden, indem Sie mit der rechten Maustaste auf eine lokale .html Datei klicken. Die Funktionalität Ihrer App, die speziell erfordert, dass sich Ihre App auf einem Server befindet, funktioniert nicht, und DevTools verfügt über ein eingeschränktes Hilfsprogramm.

Informationen zu http-server finden Sie unter http-server: ein einfacher statischer HTTP-Server.

Einrichten von http-server

  1. Wählen Sie in Visual Studio Code Datei>Ordner> öffnen aus, um das Verzeichnis zu öffnen, das die .htmlDateien , .cssund .js für eine Webseite enthält, z C:\Users\username\Documents\GitHub\Demos\demo-to-do\. B. .

    Im obigen Beispielpfad:

    • \Documents\GitHub\ ist der Ort, an dem das Demos Repository geklont wurde.
    • \Demos\ ist das GitHub-Repository, das als Beispiele in der Microsoft Edge-Entwicklerdokumentation verwendet wird.
    • \demo-to-do\ ist eines der Beispielverzeichnisse im Repository.

  2. Wählen Sie in Visual Studio CodeTerminalanzeigen> aus. Oder öffnen Sie eine Eingabeaufforderung außerhalb von Visual Studio Code, z git bash. B. , um den Webserver unabhängig vom Zustand von Visual Studio weiterhin auszuführen.

  3. cd in den Ordner, den Sie über HTTP bereitstellen möchten.

    Verwenden Sie in der Git Bash-Shell Schrägstriche, z. B.:

    cd C:/Users/username/Documents/GitHub/Demos/demo-to-do/

    Wenn Sie eine andere Eingabeaufforderung unter Windows verwenden, verwenden Sie umgekehrte Schrägstriche, z. B.:

    cd C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Fahren Sie weiter unten fort.

Starten des Servers (npx http-server)

Mit diesen Schritten wird der Server zum ersten Mal gestartet.

  1. Geben Sie den Befehl ein npx http-server:

    npx http-server

    Ein lokaler Webserver wird an Port 8080 gestartet.

    Möglicherweise erhalten Sie eine Meldung wie die folgende:

    Need to install the following packages:
  http-server@14.1.1
Ok to proceed? (y)

    Wenn Sie keine solche Datei oder ein solches Verzeichnis erhalten, können Sie Folgendes ausführen: npm install --global http-serverhttp-server

  2. Geben Sie y ein.

    Windows fordert sie auf, ob Node die Kommunikation im Netzwerk erlauben soll:

    Zulassen der Kommunikation des Knotens im Netzwerk

  3. Aktivieren Sie das Kontrollkästchen Private Netzwerke , und klicken Sie dann auf die Schaltfläche Zugriff zulassen .

    Es werden Informationen zum Server und zur localhost-URL angezeigt, z. B.:

    Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

    Die angezeigten URLs entsprechen in der Regel der allgemeinen Standard-URL. http://localhost:8080

    Starten des Servers

Weitere Informationen finden Sie unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code.

Siehe auch