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, darunter:

  • 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 Infoseite auf den Demo-Link . Die Liveseite wird in Microsoft Edge geöffnet.

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

Liste der DevTools-Beispiele

Siehe:

Einige der Beispiele sind unten dargestellt.

To Do Demo

Diese einfache Aufgabenlisten-Webseite wird verwendet, um verschiedene DevTools-Features zu veranschaulichen. It has an file.html, a file, .css and .js files:

To Do-Demo und DevTools mit ausgewähltem Tool

Demo-Webseite mit Problemen bei der Barrierefreiheit

Diese Animal Shelter-Demowebseite 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 auf 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.

Die

Artikel

Diese Artikel führen Sie durch die Verwendung dieser Demowebseite:

Quellcode-Repository

Dies ist das Quellcode-Repository und sein Verzeichnis, in dem die Dateien für diese Demo-Webseite gespeichert sind:

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

    • index.html - Die Demo-Webseite, einschließlich Seitenabschnitten und Eingabeformularen, 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.css, und dark-theme.css - CSS-Dateien, die die Darstellung der Demowebseite steuern.

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

Demowebseite: JavaScript mit DevTools debuggen

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

  1. Öffnen der Demowebseite Erste Schritte beim Debuggen von JavaScript mit DevTools in einem neuen Fenster oder auf 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.

Die Demo-Webseite

Artikel

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

  • Der grundlegende Ansatz für die Verwendung eines Debuggers in der Übersicht über das Tool "Quellen". In diesem Artikelabschnitt werden Sie kurz durch die Schritte zur Verwendung des JavaScript-Debuggers im Tool "Quellen" geführt, 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 Demowebseite zusammen mit dem Debugger, zur Demonstration verschiedener Features des Debuggers und zum Festlegen verschiedener Arten von Haltepunkten.

Quellcode-Repository

Dies ist das Quellcode-Repository und sein Verzeichnis, in dem die Dateien für diese Demo-Webseite gespeichert sind:

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

    • README.md - Enthält Links zur gerenderten Demo-Webseite und den ausführlichen Tutorial-Artikel 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 Sie das Repository "MicrosoftEdge / Demos" auf Ihr Laufwerk

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

Es wird empfohlen, das Repository zu klonen, anstatt es herunterzuladen, damit Sie Updates des Repositorys abrufen und vollständig am Repository teilnehmen können.

So klonen Sie das MicrosoftEdge / Demos-Repository auf Ihr lokales Laufwerk:

  1. Prüfen git Sie an einer Eingabeaufforderung, 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 auf einer neuen Registerkarte zum MicrosoftEdge / Demos-Repository.

  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 Schritt zur Eingabeaufforderung.

  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:

Fahren Sie mit dem nächsten Abschnitt fort.

Klonen Sie das "MicrosoftEdge / Demos"-Repository mit VS Code auf Ihr Laufwerk

So klonen Sie das MicrosoftEdge / Demos-Repository auf Ihr lokales Laufwerk:

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

  2. Klicken Sie auf die Dropdownschaltfläche "Code ", und klicken Sie dann auf "Mit Visual Studio öffnen ", falls dies angezeigt wird. Es wird eine Liste von Handlerselektorelementen angeboten, eines pro installierter Visual Studio-Instance. Diese Option wird nur angezeigt, wenn Sie angemeldet sind.

    Klonen des MicrosoftEdge/Demos-Repositorys

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

  4. Fügen Sie im Textfeld Repository-URL bereitstellen 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

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

  6. Die Meldung Cloning git repository (Klonen des Git-Repositorys ) wird angezeigt, und Sie werden aufgefordert, das geklonte Repository zu öffnen. Klicken Sie auf die Schaltfläche "Öffnen ":

    Zum Öffnen des geklonten Repositorys aufgefordert

  7. Wenn Sie aufgefordert werden Vertrauen ..., klicken Sie auf die Schaltfläche "Ja ". Oder klicken Sie auf die Schaltfläche Nein , und fahren Sie mit den meisten Teilen dieser exemplarischen Vorgehensweise fort.

    Die Explorer-Struktur listet viele Demos auf, einschließlich Demo-to-do.

Siehe auch:

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

Durch das Klonen eines Repositorys wird aktiviert, dass die lokale Kopie aktualisiert wird, wenn das Repository aktualisiert wird. Viele Tools unterstützen das Klonen und Synchronisieren mit einem GitHub-Repository, z. B.:

  • Git-Befehle an einer Eingabeaufforderung wie der Shell "git bash" Dies ist der Hauptweg, der hier dokumentiert ist.

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

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

  • Visual Studio >Registerkarte Git-Änderungen 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 eines Branchs oder eines Pull Requests (PR) die Punkttaste (.). Klicken Sie in der Aktivitätsleiste auf der linken Seite auf:

    • Quellcodeverwaltung
    • GitHub-Pull Requests
    • GitHub-Pull-Anforderung

Herunterladen des Demos-Repositorys

Es wird empfohlen, das Repository zu klonen, anstatt es herunterzuladen, damit Sie Updates des Repositorys abrufen und vollständig am Repository teilnehmen können.

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

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

  2. Klicken Sie auf die Dropdownschaltfläche "Code " und anschließend auf "ZIP herunterladen".

    Die .zip Datei wird in Ihrem Downloadverzeichnis abgelegt. Entpacken Sie diese Webseitenquelldateien an einen 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 die URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-doein.

    Die .zip Datei wird in Ihrem Downloadverzeichnis abgelegt. Entpacken Sie diese Webseitenquelldateien an einen geeigneten Speicherort.

Siehe auch:

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

Um diesen Abschnitt zu verwenden, führen Sie zunächst die Schritte unter Klonen des Repositorys "MicrosoftEdge / Demos" auf Ihr Laufwerk aus, siehe oben.

Siehe auch:

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 "Überprüfen" 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 (Symbol ").

  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 (Schaltfläche ").

  5. Klicken Sie auf + Ordner zu 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:

    Auswählen des Demo-To-Do-Verzeichnisses

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

    DevTools fordert Zugriff an, um dem Arbeitsbereich einen Ordner hinzuzufügen

Starten Sie den localhost-Server

Wenn Sie den localhost-Server aus einem bestimmten Demo-Ordner starten, z. B \Demos\demo-to-do. , und dann zu localhost:8080 (oder einfach die lokale Datei öffnen, z. B C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html . in Microsoft Edge), wird die spezifische Demo sofort im Browser angezeigt. Sie können dann nur das spezifische Demoverzeichnis, z. B C:\Users\localAccount\GitHub\Demos\demo-to-do\. , zur Registerkarte "Arbeitsbereich " des Tools "Quellen" hinzufügen. Sie haben dann die volle Funktionalität für die Verwendung von DevTools als IDE für diese spezifische Demo.

Starten des Servers aus 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 Wechselns zu localhost:8080:

Server gestartet aus dem Verzeichnis \Demos\demo-to-do

Starten des localhost-Servers aus dem Demos-Verzeichnis

Wenn Sie den localhost-Server aus dem gesamten \Demos\ Ordner starten und dann zu localhost:8080gehen, können Sie im Browser zu jeder Demo navigieren. Sie können den gesamten geklonten /Demos/ Ordner zur Registerkarte Arbeitsbereich des Tools Quellen hinzufügen. Anschließend verfügen Sie über die volle Funktionalität 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 Wechselns zu localhost:8080:

Der Server wurde aus dem Verzeichnis /demos/ anstelle eines bestimmten Demo-Unterverzeichnisses gestartet.

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

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

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

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

    In 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 Arbeitsbereich aus.

Siehe auch:

Öffnen einer lokalen HTML-Datei aus dem Dateidialogfeld "Datei öffnen" des Browsers und Bearbeiten in DevTools

So öffnen und bearbeiten Sie eine .html Datei:

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

  2. Wählen Sie eine HTML-Datei aus der lokalen Kopie des Demos-Repositorys aus, z. B C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. . . 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 "Überprüfen" 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 (Symbol ").

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

  6. Drücken Sie ESC , um den Schnellansichtsbereich am unteren Rand der DevTools zu öffnen.

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

  8. Bearbeiten Sie die .html Datei in der Mitte des Editor-Bereichs des Quellentools. Ändern Sie beispielsweise im demo-to-do/index.html Ordner in der <h1> Überschriftenzeile "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, indem Sie die Schritte unter Öffnen eines Demoordners über die Registerkarte Arbeitsbereich im Tool Quellen oben ausführen.

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

    Die geänderte Demo-To-Do-Seite vor dem Speichern der Änderungen

  9. Drücken Sie Strg+S (Windows, Linux) oder Befehl+S (macOS), um die Änderung zu speichern. Das Sternchen wird von der Registerkarte index.html im Tool "Quellen " entfernt.

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

    Die geänderte Demo-To-Do-Seite nach dem Speichern der Änderungen und dem Aktualisieren

Öffnen eines Demoordners in Visual Studio Code

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

  1. Klicken Sie in Visual Studio Code in der Aktivitätsleiste auf die Schaltfläche Explorer (Explorer-Symbol). 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 im geklonten Demo-Repository zu dem demo-to-do Ordner, wählen Sie den Ordner aus, oder gehen Sie in ihn hinein, und klicken Sie dann auf die Schaltfläche " Ordner auswählen ":

    Auswählen des Demo-To-Do-Ordners

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

    Den Ordner

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

Siehe auch:

URL-Muster für gerenderte Demo-Webseiten und Quellcode

Die meisten Infodateien im Demos-Repository verfügen über einen Link, der die gerenderte .html Datei vom GitHub.io Server öffnet. Manchmal haben Sie eine URL für eine HTML-Quelldatei unter GitHub.com, aber stattdessen müssen Sie die github.io Server-URL ableiten, um die gerenderte Datei anzuzeigen, anstatt die Codeauflistung des .html Quellcodes im GitHub-Verzeichnis anzuzeigen.

Um die URL für das Quellcodeverzeichnis bei GitHub.com zur URL für eine gerenderte Demowebseite bei GitHub.io zu konvertieren, lautet das Muster wie folgt:

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

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

Die Hauptkomponenten dieser GitHub.com-URL sind:

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

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

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

Gehen Sie in diesem Beispiel folgendermaßen vor, um dieses GitHub.io URL-Muster auszufüllen:

  • [org] ist MicrosoftEdge.
  • [repo] ist Demos.
  • [path] is demo-to-do.

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

  • 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 Repository-Ordner starten, wie z. B C:\Users\localAccount\GitHub\Demos\workspaces. , wird normalerweise in der Adressleiste des Browsers angezeigt localhost:8080 .

Weitere Informationen

Öffnen und Bearbeiten von Dateien:

Herunterladen und Klonen:

Ausführen eines lokalen Webservers:

  • Zuletzt aktualisiert um