Öffnen von DevTools und dem DevTools-Browser

  • Artikel

Es gibt mehrere Möglichkeiten, die Registerkarten DevTools und Edge DevTools: Browser zu öffnen:

Ansatz Beschreibung
Klicken Sie mit der rechten Maustaste auf eine .html Datei. Es wird keine launch.json Datei verwendet. Öffnet DevTools im Debugmodus. Verwenden Sie diesen Ansatz, wenn Sie debuggen möchten und Ihre Web-App über das Dateisystem anstelle eines Webservers ausgeführt werden kann.
Klicken Sie auf die Schaltfläche Instanz starten . Es wird keine launch.json Datei verwendet. Öffnet DevTools im Nicht-Debugmodus. Verwenden Sie diesen Ansatz, wenn Sie nicht debuggen möchten.
Klicken Sie auf die Schaltfläche Projekt starten . Eine launch.json Datei wird verwendet. Öffnet DevTools im Debugmodus. Verwenden Sie diesen Ansatz, wenn Sie debuggen möchten und Ihre Web-App APIs verwendet, die die Ausführung auf einem Webserver erfordern.

Diese Ansätze werden unten beschrieben. Ausführliche Schritte zur Verwendung des Demos-Repositorys finden Sie unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code.

Öffnen von DevTools durch Klicken mit der rechten Maustaste auf eine HTML-Datei

Dieser Ansatz öffnet die Registerkarten DevTools im Debugmodus und wird empfohlen, es sei denn, die Webseite erfordert die Ausführung auf einem Webserver, wie bei bestimmten APIs.

So öffnen Sie DevTools und den eingebetteten Browser zusammen mit der Symbolleiste Debuggen für eine HTML-Datei auf Ihrer Festplatte:

  1. Führen Sie in Visual Studio Code eine der folgenden Aktionen aus:

    • Wählen Sie Aktivitätsleiste>aus Explorer (Schaltfläche Explorer) > klicken Sie auf die Schaltfläche Ordner öffnen.
    • Wählen Sie Datei>Ordner öffnen aus.
    • Wählen Sie Datei>Zuletzt geöffnet aus.

  2. Öffnen Sie einen Ordner, der Web-App-Quelldateien enthält.

  3. Klicken Sie in Visual Studio Code in Explorer mit der rechten Maustaste auf eine .html Datei, wählen Sie Mit Edge öffnen und dann Browser mit DevTools öffnen aus:

    Klicken Sie im Explorer mit der rechten Maustaste auf eine HTML-Datei, um sie mit Edge mit oder ohne DevTools zu öffnen.

    DevTools wird geöffnet, wobei Visual Studio Code sich im Debugmodus befindet:

    Die DevTools-Komponenten aus der Auswahl von Open Browser with DevTools (Browser mit DevTools öffnen)

    Die folgenden Komponenten werden in Visual Studio Code geöffnet:

    • Die Registerkarte Edge DevTools , einschließlich der Registerkarte Elemente und anderer Toolregisterkarten.
    • Die Registerkarte Edge DevTools: Browser , einschließlich der Symbolleiste Geräteemulation am unteren Rand.
    • Die Symbolleiste Debuggen oben, einschließlich Schaltflächen wie Anhalten, Schritt über, Schritt in, Zurücksetzen und Beenden.
    • Die Debugkonsole unten.
    • Die Seitenleiste Ausführen und Debuggen (entspricht der Auswahl vonAnsichtsausführung>).

Bei diesem Ansatz ist eine instance nicht in der Aktivitätsleiste>Microsoft Edge Tools>Targets aufgeführt.

Verwenden Sie die Explorer Seitenleiste auf der Aktivitätsleiste, um eine Datei während des Debuggens .js einer Webseite zu öffnen.

Die Registerkarte Edge DevTools: Browser enthält eine Symbolleiste für die Geräteemulation. Diese Registerkarte enthält einen eingebetteten Webbrowser mit DevTools-Features. Dieser Browser wird manchmal als Screencast oder headless-Browser für DevTools bezeichnet.

Siehe auch:

Öffnen von DevTools durch Klicken auf die Schaltfläche Instanz starten

Dieser Ansatz öffnet die Registerkarten DevTools im Nicht-Debugmodus und ist nützlich, wenn Sie die Debugsymbolleiste nicht möchten.

Bei diesen Schritten wird davon ausgegangen, dass anfänglich kein Ordner in Visual Studio Code geöffnet ist und der Ordner, den Sie öffnen, keine Datei enthält launch.json .

  1. Führen Sie in Visual Studio Code eine der folgenden Aktionen aus:

    • Wählen Sie Aktivitätsleiste>aus Explorer (schaltfläche Explorer) > klicken Sie auf die Schaltfläche Ordner öffnen.
    • Wählen Sie Datei>Ordner öffnen aus.
    • Wählen Sie Datei>Zuletzt geöffnet aus.

    Um alle DevTools-Features zu verwenden, einschließlich CSS Spiegel Bearbeitung Ihrer lokalen Quelldatei beim Bearbeiten von CSS in DevTools, öffnen Sie einen Ordner mit Quelldateien, die der Webseite entsprechen, die Sie in DevTools anzeigen möchten.

  2. Klicken Sie auf der Aktivitätsleiste auf die Schaltfläche Microsoft Edge-Tools (Schaltfläche Microsoft Edge-Tools), und klicken Sie dann auf die Schaltfläche Instanz starten :

    Microsoft Edge DevTools für Visual Studio Code-Erweiterung

    Wenn die Schaltfläche Projekt starten anstelle der Schaltfläche Instanz starten vorhanden ist, gibt dies an, dass der Ordner eine launch.json Datei enthält. Überprüfen Sie, welche URL in der launch.json Datei angegeben ist, und klicken Sie ggf. auf Projekt starten, wie unter Öffnen von DevTools durch Klicken auf die Schaltfläche Projekt starten beschrieben. Wenn Sie die Funktionsweise der Schaltfläche Instanz starten untersuchen möchten, können Sie die launch.json Datei löschen und später eine neue launch.json Datei generieren.

    Klicken auf die Schaltfläche

    • Die Registerkarte Edge DevTools wird geöffnet, die zunächst Informationen zur Seite Erfolg enthält, z C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html. B. .
    • Die Registerkarte Edge DevTools: Browser (eingebetteter Browser) wird geöffnet und zeigt zunächst die Seite Erfolg an.
    • Die Debugsymbolleiste und die Debugbenutzeroberfläche von Visual Studio Code werden nicht geöffnet.
    • Im Bereich Microsoft Edge-Tools wird der Abschnitt Ziele geöffnet, in dem ein Ziel aufgelistet wird, und die Schaltfläche Instanz starten wird entfernt.

  3. Fügen Sie auf der Registerkarte Edge DevTools: Browser in der Adressleiste einen Dateipfad oder eine URL ein, die dem ordner entspricht, der in Visual Studio Code geöffnet ist.

    Wenn Sie einen Dateipfad abrufen möchten Explorer in der Visual Studio Code-Aktivitätsleiste >>(Schaltfläche Explorer) > mit der rechten Maustaste auf eine Datei >zum Kopieren des Pfads.html klicken.

    Wenn Sie eine URL einfügen möchten, sind beispiele:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Ähnliche URLs werden in der Befehlszeile angezeigt, wenn Sie z. B npx http-server . eingeben, um einen Webserver lokal auszuführen.

    Die von Ihnen angegebene Webseite wird auf der Registerkarte Edge DevTools: Browser (eingebetteter Browser) angezeigt. Auf der Registerkarte Edge DevTools werden Informationen zur Webseite angezeigt.

Siehe auch:

Öffnen von DevTools durch Klicken auf die Schaltfläche Projekt starten

Dieser Ansatz öffnet die Registerkarten DevTools im Debugmodus und wird empfohlen, wenn die Webseite wie bei bestimmten APIs auf einem Webserver ausgeführt werden muss.

Zusammenfassung:

  1. Öffnen Sie einen lokalen Ordner mit Web-App-Quelldateien.
  2. Klicken Sie auf die Schaltfläche launch.json generieren .
  3. Fügen Sie der .json Datei eine localhost-URL hinzu.
  4. Klicken Sie auf die Schaltfläche Projekt starten .

Bei diesen Schritten wird davon ausgegangen, dass Sie einen localhost-Webserver ausführen, wie in Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code beschrieben.

Führen Sie die folgenden Schritte aus, um DevTools durch Klicken auf die Schaltfläche Projekt starten zu öffnen.

Öffnen eines lokalen Ordners mit Web-App-Quelldateien

  1. Führen Sie in Visual Studio Code eine der folgenden Aktionen aus:

    • Wählen Sie Aktivitätsleiste>aus Explorer (symbol Explorer) > klicken Sie auf die Schaltfläche Ordner öffnen.
    • Wählen Sie Datei>Ordner öffnen aus.
    • Wählen Sie Datei>Zuletzt geöffnet aus.

    Wählen Sie ein Verzeichnis aus, das Webseitenquelldateien enthält. Beispiel: C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. Klicken Sie auf der Aktivitätsleiste auf Microsoft Edge-Tools (Symbol "). Der Bereich Microsoft Edge-Tools wird geöffnet.

    • Wenn der Ordner noch kein Verzeichnis enthält .vscode , das einen launch.json fileenthält, enthält die Seitenleiste von Microsoft Edge Tools die Schaltfläche Instanz starten und die Schaltfläche launch.json generieren .

    • Wenn der Ordner bereits ein .vscode Verzeichnis enthält, das eine launch.json Datei enthält, enthält die Seitenleiste der Microsoft Edge-Tools die Schaltfläche Projekt starten und nicht die Schaltfläche launch.json generieren . In diesem Fall können Sie die Zeichenfolge in der url vorhandenen launch.json Datei überprüfen oder ändern, wie unten beschrieben.

Fahren Sie weiter unten fort.

Klicken Sie auf die Schaltfläche "launch.json generieren".

  1. Klicken Sie auf die Schaltfläche launch.json generieren :

    Schaltfläche

    Die neue launch.json Datei wird geöffnet.

Fahren Sie weiter unten fort.

Hinzufügen einer localhost-URL in der .json-Datei

  1. Scrollen Sie an mehreren Stellen in der launch.json Datei in jeder der "url" Zeilen nach rechts, und notieren Sie sich den Kommentar "Geben Sie die URL Ihres Projekts an, um die Konfiguration abzuschließen":

    "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

    Typische Beispiele:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Ähnliche URLs werden in der Befehlszeile angezeigt, wenn Sie einen Server starten, indem Sie eingeben npx http-server.

  2. Fügen Sie den Pfad in die Pfadzeichenfolge in Anführungszeichen in eine der "url" Zeichenfolgen ein. Zum Beispiel:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

    Die URL-Zeichenfolge kann ein lokaler Dateipfad sein, obwohl Sie in diesem Fall keine Datei benötigenlaunch.json. Zum Starten von DevTools können Sie stattdessen einfach mit der rechten Maustaste auf eine .html Datei im Explorer von Visual Studio Code klicken.

    (Wenn Sie die URL unverändert beibehalten, wird die Standardseite Erfolg angezeigt, und Sie können eine localhost-URL oder einen Dateipfad in die Adressleiste der Registerkarte Edge DevTools: Browser einfügen.)

  3. Kopieren Sie die geänderte URL-Zeile, und fügen Sie sie an die anderen Stellen in der launch.json Datei ein. Um alle Instanzen gleichzeitig zu ändern, können Sie eine aktualisierte URL-Zeichenfolge kopieren, dann eine instance der ursprünglichen URL-Zeichenfolge auswählen, STRG+UMSCHALT+L drücken, um alle Instanzen auszuwählen, und dann die aktualisierte Zeichenfolge einfügen.

  4. Speichern Sie die launch.json Datei.

Fahren Sie weiter unten fort.

Klicken Sie auf die Schaltfläche Projekt starten.

  1. Klicken Sie in Visual Studio Code in der Aktivitätsleiste auf die Schaltfläche Microsoft Edge-Tools (Symbol Microsoft Edge-Tools). Der Bereich Microsoft Edge-Tools wird geöffnet, der jetzt die Schaltfläche Projekt starten (anstelle einer Schaltfläche Instanz starten ) enthält und keine Schaltfläche launch.json Datei generieren mehr enthält:

    Bereich

  2. Klicken Sie auf die Schaltfläche Projekt starten .

    Die Registerkarte Edge DevTools und die Registerkarte Edge DevTools: Browser werden in separaten Bereichen geöffnet, in denen die web-App-URL angezeigt wird, die in launch.jsonangegeben ist:

    Die In DevTools gestartete Demo-to-Do-App durch Schaltfläche

Siehe auch:

Zuordnen von URL-Dateien zum geöffneten Ordner

Wenn DevTools in der Lage ist, die Arbeitsbereichszuordnung zwischen den vom Server heruntergeladenen Dateien und den Dateien in dem Ordner, den Sie geöffnet haben, zu korrelieren und einzurichten, stellt DevTools die vollständige Funktionalität bereit, einschließlich CSS Spiegel Bearbeitung Ihrer lokalen Quelldateien, wenn Sie CSS in DevTools ändern.

Wenn DevTools die Dateien auf der Registerkarte Edge DevTools: Browser nicht den Dateien in dem Ordner zuordnen kann, den Sie im Explorer von Visual Studio Code geöffnet haben, können Sie Webseiten untersuchen und sie ändern, z. B. das Ändern von CSS-Werten auf der Registerkarte Quellen des Tools Elemente auf der Registerkarte Edge DevTools. In diesem Fall können Sie jedoch keine CSS-Spiegel Bearbeitung verwenden, damit DevTools Ihre Quelldateien automatisch bearbeiten lässt. Die folgenden Optionen stehen zur Verfügung:

  • Deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten auf der Registerkarte Formatvorlagen, und experimentieren Sie mit CSS-Änderungen.

  • Öffnen Sie einen Ordner, der Quelldateien enthält, die der Webseite entsprechen.

  • Gewähren Sie einem Ordner eine Vertrauensstellung, indem Sie ihn in Visual Studio Code öffnen.

Zum Beispiel:

  1. Öffnen Sie einen Ordner, der sich in Ihrer lokalen Kopie des Demos-Repositorys befindet, z. B. , wie C:\Users\username\Documents\GitHub\Demos\demo-to-do\unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code beschrieben.

  2. Öffnen Sie DevTools, wie oben beschrieben.

  3. Fügen Sie auf der Registerkarte Edge DevTools: Browser in der Adressleiste eine Remote-URL github.io ein, z https://microsoftedge.github.io/Demos/demo-to-do/. B. .

    Die Dateien unter dieser Adresse befinden sich tatsächlich als Quelldateien auf GitHub unter https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, nicht auf Ihrem Laufwerk.

    Sie können nun CSS-Werte im Elementtool ändern, da im Explorer von Visual Studio Code ein Ordner geöffnet ist, der Quelldateien enthält, die DevTools den heruntergeladenen Ressourcendateien zuordnen kann, die die Webseite bilden:

    Css-Werte können geändert werden, wenn ein zugeordneter Ordner geöffnet ist

    Die obige Abbildung zeigt die Verwendung der Registerkarte Formatvorlagen mit aktiviertem CSS-Spiegel Bearbeitungsfeld, das zum Vergrößern des Textkörpers auf 24 Pt. verwendet wird. Die Registerkarte Edge DevTools: Browser rendert die Seite, wenn Sie den Wert ändern. Die Adressleiste der Registerkarte enthält eine URL anstelle eines Dateipfads. Da CSS Spiegel Bearbeitungskontrollkästchen aktiviert ist und sich die entsprechende .css Datei in einem beschreibbaren lokalen Ordner befindet, wird die .css Datei auf dem lokalen Laufwerk automatisch in 24pt;bearbeitet.

Vermeiden von Fehlermeldungen zur Spiegelung oder Zuordnung

Versuchen Sie als Nächstes, CSS zu ändern, ohne einen entsprechenden Ordner geöffnet zu haben:

  1. Wählen Sie Datei>Ordner schließen aus.

  2. Starten Sie DevTools, indem Sie wie oben beschrieben auf die Schaltfläche Instanz starten klicken.

  3. Fügen Sie auf der Registerkarte Edge DevTools: Browser in der Adressleiste eine Remote-URL github.io ein, z https://microsoftedge.github.io/Demos/demo-to-do/. B. .

    Nachdem der Ordner mit den Quelldateien geschlossen wurde, erhalten Sie eine DevTools-Fehlermeldung, wenn Sie versuchen, CSS-Werte im Elementtool zu ändern. Sie können Webseiten untersuchen, aber nicht bearbeiten. Sie können mit der Seite interagieren und sie in verschiedenen Geräten und Renderingzuständen anzeigen, indem Sie die Symbolleiste Geräteemulation am unteren Rand der Registerkarte Edge DevTools: Browser verwenden.

    Sie können auch css und HTML untersuchen. Wenn Sie jedoch versuchen, die Seite zu ändern, erhalten Sie einen Fehler, z. B . Fehler während der Spiegelung:

    Explorer, wenn CSS-Werte nicht geändert werden können, wenn ein zugeordneter Ordner nicht geöffnet ist

    Eine andere Perspektive für dieses Szenario ist die Seitenleiste von Microsoft Edge-Tools , wenn auf die Schaltfläche Instanz starten geklickt wurde, wenn eine URL angezeigt wird und kein Ordner geöffnet ist, der Quelldateien enthält, die den Webseitenressourcen der URL entsprechen:

    Die Seitenleiste der Microsoft Edge-Tools beim Anzeigen einer URL

In diesem Fall sind folgende Optionen verfügbar:

  • Deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten auf der Registerkarte Formatvorlagen, und experimentieren Sie mit CSS-Änderungen (ohne automatische Bearbeitung von CSS in Quelldateien). Dadurch werden weitere Fehlermeldungen zur Zuordnung zu Quelldateien für CSS-Spiegel Bearbeitung verhindert.

  • Öffnen Sie einen Ordner, der Quelldateien enthält, die der Webseite entsprechen, um eine automatische Bearbeitung von CSS in Quelldateien zu erhalten.

  • Gewähren Sie einem Ordner eine Vertrauensstellung, indem Sie ihn in Visual Studio Code öffnen, falls DevTools versucht, eine Quelldatei zu bearbeiten, Visual Studio Code dem enthaltenden Ordner jedoch keine Vertrauensstellung gewährt hat.

Siehe auch:

URLs, Dateipfade und Öffnen eines übereinstimmenden Ordners

In einigen Fällen unterscheidet sich das Verhalten von DevTools für Dateipfade von dem für URLs.

  • Wenn Sie einen Dateipfad in die Adressleiste des DevTools-Browsers eingeben und das CSS in DevTools bearbeiten, weiß der Browser, wo die Quelldateien zu finden sind. Möglicherweise müssen Sie diesen Ordner öffnen, um ihm vertrauen zu können, um CSS Spiegel Bearbeitung verwenden zu können. Oder deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten.

  • Wenn Sie eine URL in die Adressleiste des DevTools-Browsers eingeben, weiß der Browser, wo die heruntergeladene Kopie der Quelldateien zu finden ist, wenn Sie nur Webseiten untersuchen und mit CSS experimentieren. Wenn Sie CSS Spiegel Bearbeiten verwenden möchten (damit DevTools CSS in Quelldateien bearbeiten kann), muss das Kontrollkästchen CSS-Spiegel Bearbeiten aktiviert sein, und Sie müssen einen Ordner in Visual Studio Code öffnen, der Quelldateien enthält, die der Webseite entsprechen.

Schließen von DevTools

Schließen Sie Instanzen von DevTools mit einem der folgenden Ansätze:

  • Wenn sich Visual Studio Code im Debugmodus befindet, klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche Beenden , oder wählen Sie Debuggen ausführen>aus:

    Schaltfläche

    Die Registerkarten Edge DevTools und Edge DevTools: Browser werden geschlossen.

  • Wenn die Registerkarte Edge DevTools geöffnet ist, klicken Sie auf der Registerkarte auf Schließen (x).

  • Wenn die Registerkarte Edge DevTools: Browser geöffnet ist, klicken Sie auf der Registerkarte auf Schließen (x).

  • Wählen Sie Aktivitätsleiste>Microsoft Edge-Tools aus. Wenn im Abschnitt Ziele Ziele aufgelistet sind, zeigen Sie auf die rechte Seite des ziel-instance, und klicken Sie dann auf schließen instance (x):

    Schließen von DevTools beim Öffnen durch Klicken auf die Schaltfläche

    Anschließend wird die Schaltfläche Instanz starten oder Projekt starten angezeigt.

  • Wählen Sie Datei>Ordner schließen aus.

  • Schließen Sie das Visual Studio Code-Fenster.

  • Wenn ein externer, automatisierungsgesteuerter Browser von der DevTools-Erweiterung geöffnet wurde, schließen Sie das externe Browserfenster.

Siehe auch