Freigeben über

Erste Schritte durch Klicken mit der rechten Maustaste auf eine HTML-Datei

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie DevTools öffnen und schließen, indem Sie im Explorer von Visual Studio Code mit der rechten Maustaste auf eine .html Datei für Demo To Do klicken, ohne einen Webserver ausführen zu müssen.

Schritt 1: Installieren von DevTools und voraussetzungen

  1. Falls noch nicht geschehen, führen Sie die Schritte unter Installieren der DevTools-Erweiterung für Visual Studio Code aus, und fahren Sie dann weiter unten fort. Sie müssen für dieses Tutorial keinen Webserver installieren und starten, aber es wird empfohlen.

Schritt 2: Starten Sie DevTools, indem Sie mit der rechten Maustaste auf eine HTML-Datei klicken.

Das Klicken mit der rechten Maustaste auf eine .html Datei im Explorer von Visual Studio Code ist die Standard Möglichkeit, DevTools zu öffnen, wenn Ihre Webseite nicht auf einem Webserver ausgeführt werden muss.

  • Im Gegensatz zur Schaltfläche Instanz starten öffnet dieser Ansatz DevTools im Debugmodus.

  • Im Gegensatz zur Schaltfläche Projekt starten , die wir später verwenden werden, müssen Sie bei diesem Ansatz keine Datei generieren launch.json .

Wir veranschaulichen, indem wir die Demo-to-Do-Web-App öffnen:

  1. Wählen Sie in Visual Studio Code Datei>Ordner öffnen aus.

  2. Wechseln Sie zu dem Verzeichnis, in dem Sie das Demos-Repository geklont haben, öffnen Sie das spezifische Verzeichnis für die Demo-to-Do-App , z C:\Users\username\Documents\GitHub\Demos\demo-to-do\. B. , und klicken Sie dann auf die Schaltfläche Ordner auswählen :

    Ordner öffnen: demo-to-do

  3. Wählen Sie Aktivitätsleiste>aus Explorer (Explorer Symbol) > klicken Sie mit der rechten Maustaste, index.html und wählen Sie dann Mit Edge>öffnen Browser mit DevTools öffnen aus:

    Klicken Sie mit der rechten Maustaste auf > Browser mit DevTools öffnen.

    • Die Registerkarte Edge DevTools wird geöffnet.

    • Die Registerkarte Edge DevTools: Browser wird geöffnet und zeigt die Webseite an, auf die Sie mit der rechten Maustaste geklickt haben.

    • Die Symbolleiste Debuggen von Visual Studio Code wird geöffnet, die Debugkonsole wird unten geöffnet, und der Bereich Ausführen wird geöffnet. Diese Features deuten darauf hin, dass sich Visual Studio Code im Debugmodus befindet:

    Die beiden Edge DevTools-Registerkarten und die Debugsymbolleiste

Schritt 3: Anordnen von Registerkarten

Um Platz zu sparen, verwenden Sie die Schaltfläche DevTools schließen oder DevTools öffnen und die Schaltfläche Screencast umschalten, um die DevTools-Registerkarten umzuschalten (zu öffnen oder zu schließen).

  1. Klicken Sie in der oberen linken Ecke der Registerkarte Edge DevTools auf die Schaltfläche Screencast umschalten:

    Die Schaltfläche

    Die Registerkarte Edge DevTools: Browser wird geschlossen.

  2. Klicken Sie auf der Registerkarte Edge DevTools erneut auf die Schaltfläche Screencast umschalten.

    Die Registerkarte Edge DevTools: Browser wird geöffnet.

  3. Klicken Sie oben rechts auf der Registerkarte Edge DevTools: Browser auf die Schaltfläche DevTools schließen :

    Schaltfläche

  4. Klicken Sie oben rechts auf der Registerkarte Edge DevTools: Browser auf die Schaltfläche DevTools öffnen .

  5. Ziehen Sie die Registerkarte Edge DevTools: Browser , um sie an eine beliebige Stelle in Visual Studio Code anzudocken, z. B. das Gruppieren mit dem Quellcode-Editor.

Schritt 4: Bearbeiten von CSS in DevTools und automatisches Aktualisieren der .css-Datei

Auf der Registerkarte Edge DevTools können Sie auf der Registerkarte Stile des Elements-Tools> CSS-Selektoren, Regeln und Werte bearbeiten. Das Kontrollkästchen CSS Spiegel Bearbeitung ist standardmäßig aktiviert, sodass die .css Datei automatisch bearbeitet wird, aber die Änderungen nicht gespeichert werden, sodass Sie entscheiden können, ob die Änderungen gespeichert werden sollen.

  1. Klicken Sie im Tool Elemente auf der Registerkarte Formatvorlagen auf einen CSS-Wert, z. B. den Schriftgrad für den Textkörper.

  2. Ändern Sie den CSS-Wert, z. B. mit dem Mausrad oder drücken Sie NACH-OBEN und NACH-UNTEN. Die zugeordnete .css Datei wird geöffnet, z to-do-styles.css . B. und scrollt zu der Zeile, die den CSS-Wert definiert, und bearbeitet die .css Datei automatisch, speichert jedoch keine Änderungen:

    CSS-Spiegel Bearbeiten

  3. Schließen Sie die .css Datei. Visual Studio Code fordert Sie auf, ob Änderungen gespeichert werden sollen.

  4. Klicken Sie auf die Schaltfläche Nicht speichern .

Schritt 5: Schrittweises Durchlaufen von JavaScript-Code im Debugger

  1. Wählen Sie Aktivitätsleiste> Explorer (Explorer Symbol in der Aktivitätsleiste) aus.

  2. Klicken Sie im Demo-to-Do-Verzeichnis auf to-do.js , um es zu öffnen. Scrollen Sie nach unten zur changeTask Funktion, und klicken Sie dann links neben einer Zeilennummer, um einen Haltepunkt festzulegen:

    Debuggen der Demo-App

  3. Wenn die Seitenleiste "Ausführen und Debuggen" nicht angezeigt wird, wählen Sie Ausführung anzeigen> aus. Die Seitenleiste "Ausführen" und "Debuggen " enthält den Überwachungsbereich und andere Debuggerbereiche.

  4. Geben Sie in der Demo-App, die auf der Registerkarte Edge DevTools: Browser gerendert wird, eine Aufgabe ein, z. B. test. Der Debugger von Visual Studio Code hält am Haltepunkt in der to-do.js Datei an:

    Schrittweises Durchlaufen von JavaScript in der Demo-App

  5. Durchlaufen Sie auf der Symbolleiste Debuggen oder mithilfe des Menüs Ausführen oder durch Drücken der Tasten ein paar Codezeilen in to-do.js.

  6. Klicken Sie in der Demo-App, die auf der Registerkarte Edge DevTools: Browser gerendert wird, auf den Kreis "Fertig" neben der Testaufgabe. Der Debugger von Visual Studio Code hält am Haltepunkt in der to-do.js Datei an.

Schritt 6: Schließen von DevTools

So beenden Sie das Debuggen und schließen die Edge DevTools-Registerkarten :

  1. Klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche Beenden (UMSCHALT+F5). Oder wählen Sie im Menü Ausführen die Option Debuggen beenden aus:

    Schaltfläche

    Die Registerkarte Edge DevTools wird geschlossen, und die Registerkarte Edge DevTools: Browser wird geschlossen.

Siehe auch:

Sie haben das Tutorial "Erste Schritte durch Klicken mit der rechten Maustaste auf eine HTML-Datei" abgeschlossen. Es wird empfohlen, dass Sie auch die anderen Tutorials durchführen. Weitere Informationen finden Sie unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code.

Siehe auch

Github: