Erste Schritte durch Klicken auf die Schaltfläche "Instanz starten"

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie DevTools öffnen und schließen, indem Sie auf die Schaltfläche Instanz starten klicken, um mit der Demo-Webseite Erfolg zu experimentieren. Mit diesem Ansatz wird die Standardwebseite "Erfolg" für die Bearbeitung geöffnet, damit Sie die Verwendung von DevTools üben und beginnen können. Dieser Ansatz ist in der Benutzeroberfläche hervorgehoben und öffnet die Registerkarten DevTools im Nicht-Debugmodus.

Diese Art des Öffnens von DevTools ist für diese einfachen Szenarien nützlich:

  • Wenn Sie mit der Bearbeitung der Standardseite Erfolg mithilfe von DevTools experimentieren möchten.

  • Wenn Sie eine Seite überprüfen möchten, die mithilfe einer URL angegeben wird und keinen Debugmodus benötigt. Um eine andere Webseite zu öffnen, können Sie eine URL oder einen Dateipfad in die Adressleiste einfügen.

  • Wenn Kein Ordner geöffnet ist und Sie mit dem Ändern von CSS auf einer Seite experimentieren möchten, die mithilfe einer URL angegeben wird, ohne eine lokale Quelldatei zu bearbeiten.

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: Klicken Sie auf die Schaltfläche Instanz starten

  1. Wählen Sie in Visual Studio Code Datei>Neues Fenster aus. Zunächst wird kein Ordner geöffnet.

  2. Klicken Sie in der Aktivitätsleiste auf Microsoft Edge-Tools (Symbol "). Die Seitenleiste für Microsoft Edge-Tools wird geöffnet:

    Schaltfläche

  3. Klicken Sie auf die Schaltfläche Instanz starten . Die Registerkarte Edge DevTools wird geöffnet, und die Registerkarte Edge DevTools: Browser wird geöffnet, auf der die Standardseite Erfolg angezeigt wird:

    Das Standardergebnis von Launch Instance: die Registerkarten

    Die Quelldatei der Erfolgsseite ist eine eigenständige .html Datei in einem Verzeichnis auf Ihrem Laufwerk. Dies ist eine einzelne .html Datei, die CSS-Regeln (in einem <style> -Element) enthält. Es enthält auch eine JavaScript-Anweisung console (in einem <script> -Element).

    In der Adressleiste des DevTools-Browsers gibt es einen file:/// Pfad (anstelle einer URL), z file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html. B. .

    Die Symbolleiste Debuggen wird nicht geöffnet, die Debugkonsole wird unten nicht geöffnet, und die Seitenleiste "Ausführen" und "Debuggen " mit dem Bereich " Überwachen " wird nicht geöffnet. Dies weist darauf hin, dass sich Visual Studio Code nicht im Debugmodus befindet.

    Sie können css der lokalen Dateien ändern und lokale Dateipfade oder localhost-URLs in die Adressleiste eingeben und mit lokalen Web-App-Seiten interagieren.

Schritt 3: Öffnen eines Ordners, um sicherzustellen, dass die Bearbeitung zulässig ist

Beachten Sie, dass in Visual Studio Code kein Ordner geöffnet ist. In vielen Fällen müssen Sie einen Ordner öffnen, der Quelldateien enthält, die mit der angezeigten Webseite übereinstimmen, um devTools zu bearbeiten, anstatt nur eine Webseite zu überprüfen. Das Öffnen eines Ordners bietet die größte Flexibilität, sodass Sie entweder eine URL oder einen Dateipfad in der Adressleiste der Registerkarte Edge DevTools: Browser öffnen können und über vollständige DevTools-Funktionen verfügen.

Wenn Sie einen Ordner öffnen, haben Sie die Möglichkeit, dem Ordner Vertrauen zu gewähren, sodass Sie keine Fehlermeldung erhalten, wenn Sie versuchen, die Quelldateien zu ändern. Andernfalls erhalten Sie möglicherweise eine Fehlermeldung, da der Ordner, der die Seite Erfolg enthält, nicht vertrauenswürdig ist und CSS-Spiegel Bearbeitung versucht, das CSS in der Quelldatei in diesem index.html Ordner zu bearbeiten.

  1. Wählen Sie auf der Registerkarte Edge DevTools: Browser in der Adressleiste den Dateipfad aus, aber nicht den Dateinamen, z C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/. B. .

  2. Klicken Sie in der Aktivitätsleiste>Explorer auf die Schaltfläche Ordner öffnen. Fügen Sie im Dialogfeld Ordner öffnen den pfad ein, den Sie oben kopiert haben, oder wählen Sie ihn aus. Zum Einfügen müssen Sie unter Windows möglicherweise im gesamten Pfad in \ ändern/. Klicken Sie dann auf die Schaltfläche Ordner auswählen .

    Wenn Sie einen Ordner zum ersten Mal öffnen, müssen Sie bestätigen, dass Sie den Autoren von Dateien in diesem Ordner vertrauen:

    Vertrauen Sie den Autoren in den Dateien dieses Ordners?

  3. Klicken Sie auf die Schaltfläche Ja, ich vertraue den Autoren .

    Möglicherweise müssen Sie DevTools wie folgt erneut starten:

  1. Klicken Sie in der Aktivitätsleiste auf Microsoft Edge-Tools (Schaltfläche Microsoft Edge-Tools). Die Seitenleiste der Microsoft Edge-Tools wird geöffnet.

  2. Klicken Sie auf die Schaltfläche Instanz starten . Die Registerkarte Edge DevTools wird geöffnet, und die Registerkarte Edge DevTools: Browser wird geöffnet, auf der die Standardseite Erfolg angezeigt wird.

Schritt 4: Bearbeiten von CSS

  1. Klicken Sie auf der Registerkarte Edge DevTools auf die Schaltfläche Select an element (Select an element to inspect an page to inspect it (Inspect tool icon) (Toolsymbol überprüfen), die manchmal auch als Schaltfläche "Überprüfen " bezeichnet wird.

  2. Zeigen Sie auf der Registerkarte Edge DevTools: Browser auf verschiedene Teile der Seite, während Sie die DOM-Struktur des Elements-Tools erweitern und aktualisieren watch.

  3. Klicken Sie auf die Überschrift Success! (Erfolg! ), bei der es sich um ein <h2> Element handelt.

  4. Klicken Sie auf der Registerkarte Formatvorlagen des Tools Elemente auf der Registerkarte Edge DevTools im abschnitt nicht kursiv formatierte h2-Deklaration auf rechts neben der margin-bottom Regel.

  5. Geben Sie eine neue CSS-Regel ein, font-size: 5emund drücken Sie dann die EINGABETASTE. Die Schreibweise ähnelt der Regel, die im kursiv formatierten h2-Abschnitt aus dem darunter liegenden Stylesheet des Benutzer-Agents angezeigt wird.

    index.htmlwird geöffnet, automatisch von CSS Spiegel Bearbeitung, um die Zeile font-size: 5em;hinzuzufügen. Scrollen Sie im Abschnitt h2 zu dieser Zeile.

Schritt 5: Anordnen von Registerkarten

  1. Klicken Sie auf der Registerkarte Edge DevTools im nicht kursiv formatierten Abschnitt h2 auf die font-size css-Regel, die Sie eingegeben haben, und drücken Sie dann nach OBEN und NACH-UNTEN. Der Wert in index.html wird automatisch von CSS Spiegel Bearbeitung bearbeitet.

  2. Klicken Sie auf der Registerkarte Edge DevTools einige Male auf die Schaltfläche Screencast umschalten. Die Registerkarte Edge DevTools: Browser wird geöffnet und geschlossen, wodurch Speicherplatz gespart wird.

  3. Klicken Sie auf der Registerkarte Edge DevTools: Browser einige Male auf die Schaltfläche DevTools schließen oder DevTools öffnen . Die andere Registerkarte DevTools wird geöffnet und geschlossen, wodurch Speicherplatz gespart wird.

  4. Klicken Sie oben in Visual Studio Code mit der rechten Maustaste auf die Registerkarten, und ordnen Sie sie an, um die verschiedenen Registerkarten gleichzeitig anzuzeigen:

    • Die Seitenleiste mit Microsoft Edge Tools>Targets.
    • Der index.html Editor.
    • Die Registerkarte Edge DevTools .
    • Die Registerkarte Edge DevTools: Browser .

    Bearbeiten der H2-CSS-Größe auf der Erfolgsseite

Schritt 6: Anzeigen von JavaScript

  1. Klicken Sie auf der Registerkarte Edge DevTools auf die Registerkarte Konsolentool . index.html enthält ein <script> -Element, das eine JavaScript-Anweisung console.info('Hello from the startpage!')enthält, die "Hello from the startpage!" ausgibt.

Schritt 7: Öffnen einer anderen .html Datei mithilfe der Adressleiste

Durch Eingabe eines Dateipfads in der Adressleiste der Registerkarte Edge DevTools: Browser kann die Schaltfläche Instanz starten auch verwendet werden, um eine andere .html Datei anstelle der Seite Erfolg zu öffnen. Dies wird unten veranschaulicht. Das Klicken mit der rechten Maustaste auf eine .html Datei im Explorer ist jedoch die Standard Möglichkeit, eine .html andere Datei als die Erfolgswebseite zu öffnen, und die Tools werden im Debugmodus geöffnet.

  1. Wählen Sie in Visual Studio Code Datei>Ordner öffnen (oder Zuletzt öffnen) aus. Öffnen Sie den \Demos\demo-to-do\ Ordner des von Ihnen geklonten Demos-Repositorys, z C:\Users\username\Documents\GitHub\Demos\demo-to-do\. B. .

  2. Wenn Sie dazu aufgefordert werden, klicken Sie auf die Schaltfläche Ja, ich vertraue den Autoren . Abgesehen von der Gewährung von Vertrauensstellungen erfordert der Ansatz Instanz starten nicht wirklich das Öffnen eines Ordners, wenn Sie einen Dateipfad anstelle einer URL im DevTools-Browser angeben.

  3. Wenn die Registerkarten Edge DevTools noch nicht geöffnet sind, klicken Sie in der Aktivitätsleiste auf Microsoft Edge-Tools (Symbol Microsoft Edge Tools), und klicken Sie dann auf die Schaltfläche Instanz starten :

    Schaltfläche

  4. Wählen Sie in der AktivitätsleisteExplorer aus, und klicken Sie dann mit der rechten Maustaste auf \demo-to-do\index.html>Pfad kopieren.

  5. Fügen Sie in Visual Studio Code auf der Registerkarte Edge DevTools: Browser in der Adressleiste den lokalen Dateipfad ein, den Sie oben abgerufen haben, z C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. B. . Die Demo-to-Do-App wird geöffnet. In der Adressleiste wird das file:/// Präfix hinzugefügt, und (unter Windows) werden umgekehrte Schrägstriche in Schrägstriche geändert, z. B. file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html.

  6. Geben Sie in der Demo-App eine Aufgabe ein, z. B. test.

  7. Ändern Sie im Tool Elemente auf der Registerkarte Formatvorlagen einen CSS-Wert, z. B.: Klicken Sie auf die Punktgröße in body { font-size: 11pt;} , und ändern Sie dann den Wert. Die entsprechende .css Datei in dem Ordner, den Sie geöffnet haben, wird geöffnet, und sie wird automatisch so bearbeitet, dass sie ihren Auf der Registerkarte Formatvorlagen vorgenommenen Änderungen entspricht (aber nicht gespeichert wird).

Schritt 8: Öffnen einer URL über die Adressleiste

Die Adressleiste, die sich aus der Schaltfläche Instanz starten ergibt, kann verwendet werden, um eine URL auf einem Server zu öffnen. Die Schaltfläche Projekt starten ist jedoch zusammen mit einer in launch.jsongespeicherten URL die Standard Möglichkeit, eine Webseite zu öffnen, indem Sie eine URL angeben und die Tools dann im Debugmodus öffnen.

  1. Wenn ihr localhost-Server ausgeführt wird, fügen Sie eine localhost-URL ein, z http://localhost:8080. B. . Oder fügen Sie die github.io Server-URL ein. https://microsoftedge.github.io/Demos/demo-to-do/

    Wenn Sie CSS Spiegel bearbeiten möchten, um Ihre Quelldateien zu bearbeiten, müssen Sie einen Ordner in Visual Studio Code öffnen. Deaktivieren Sie andernfalls das Kontrollkästchen CSS Spiegel Bearbeiten auf der Registerkarte Formatvorlagen im Tool Elemente auf der Registerkarte Edge DevTools. Durch das Deaktivieren des Kontrollkästchens werden Fehlermeldungen zur Zuordnung und Spiegel Bearbeiten, wenn Sie mit dem Ändern von CSS in DevTools experimentieren und keine CSS-Quelldatei für DevTools bereitgestellt haben.

  2. Geben Sie in der Demo-App eine Aufgabe ein, z. B. test.

  3. Ändern Sie im Tool Elemente auf der Registerkarte Formatvorlagen einen CSS-Wert, z. B.: Klicken Sie auf die Punktgröße in body { font-size: 11pt;} , und ändern Sie dann den Wert. Die entsprechende .css Datei in dem Ordner, den Sie geöffnet haben, wird geöffnet, und sie wird automatisch so bearbeitet, dass sie ihren Auf der Registerkarte Formatvorlagen vorgenommenen Änderungen entspricht (aber nicht gespeichert wird).

Schritt 9: Schließen von DevTools

  1. Klicken Sie auf der Registerkarte Edge DevTools und auf der Registerkarte Edge DevTools: Browser auf Schließen (x), wenn diese Registerkarten geöffnet sind.

  2. 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). Die Schaltfläche Instanz starten wird angezeigt und gibt an, dass alle DevTools-Instanzen geschlossen sind.

    Schließen von DevTools, die über Launch Instance geöffnet wurden

    Beachten Sie, dass sich Visual Studio Code im obigen Screenshot nicht im Debugmodus befindet. Beispielsweise gibt es keine Debugsymbolleiste. Wenn eine Debugsymbolleiste vorhanden ist, können Sie DevTools schließen, indem Sie auf die Schaltfläche Beenden klicken.

  3. Schließen, index.html ohne Änderungen zu speichern.

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

Siehe auch:

Sie haben das Tutorial "Erste Schritte durch Klicken auf die Schaltfläche Instanz starten" 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: