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, einschließlich:

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

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

Liste der DevTools-Beispiele

Die folgenden Demos veranschaulichen DevTools-Features.

Demoname Beschreibung Repositoryverzeichnis Live-Demoseite
CSS-Spiegelung von Sourcemaps Wird für Update .css Dateien auf der Registerkarte Formatvorlagen (CSS Spiegel Bearbeitung) für die DevTools-Erweiterung für Visual Studio Code verwendet. /css-mirroring-sourcemaps-demo/ n/v
TODO-App Einfache To-Do-App mit Vanilla JavaScript. Wird für Screenshots in der Microsoft Edge DevTools-Dokumentation und zum Öffnen von DevTools und dem DevTools-Browser für die DevTools-Erweiterung für Visual Studio Code verwendet. /demo-to-do/ Meine Aufgaben
Getrennte Elemente Chat-ähnliche Demo. Wird zum Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente" verwendet. /detached-elements/ Simulieren des Datenverkehrs
3D-Ansicht Wird für Navigationswebebenen, Z-Index und DOM mit dem Tool 3D-Ansicht verwendet. /devtools-3d/ Microsoft Edge DevTools 3D View Tool Demo
Barrierefreiheitsprüfung Wird für Barrierefreiheitstests verwendet. /devtools-a11y-testing/ Tierheim
Demoseiten des Konsolenbereichs Wird für die Konsolenübersicht, Protokollmeldungen im Konsolentool und Beheben von JavaScript-Fehlern verwendet, die in der Konsole gemeldet werden. /devtools-console/ Demoseiten des DevTools-Konsolenbereichs
Fehlerbehebung bei Kontrasten Wird zur Verbesserung des Kontrasts in Microsoft Edge DevTools verwendet: Eine Bugfix-Fallstudie. /devtools-contrast-bugfix/ Testen aller Badges in DevTools auf Kontrastprobleme
CSS-Beispiele Wird für erste Schritte zum Anzeigen und Ändern von CSS verwendet. /devtools-css-get-started/ CSS-Beispiele
DOM-Beispiele Wird für erste Schritte zum Anzeigen und Ändern des DOM verwendet. /devtools-dom-get-started/ DOM-Beispiele
Untersuchen der Tooldemo Wird zum Analysieren von Seiten mit dem Inspect-Tool verwendet. /devtools-inspect/ Demo untersuchen
Debuggen von JavaScript, das zwei Zahlen hinzufügt Wird für erste Schritte beim Debuggen von JavaScript verwendet. /devtools-js-get-started/ Demo: Debuggen von JavaScript mit Microsoft Edge DevTools
Speicherheap Momentaufnahme Wird zum Aufzeichnen von Heapmomentaufnahmen mithilfe des Speichertools verwendet. /devtools-memory-heap-Momentaufnahme/ n/v
Leistungsaktivitätsregisterkarten Wird zum Anzeigen von Aktivitäten in einer Tabelle sowie zu den Registerkarten "Bottom-Up", "Aufrufstruktur" und "Ereignisprotokoll" des Leistungstools verwendet. /devtools-performance-activitytabs/ Demo zu Aktivitätsregisterkarten
Träge Animation Wird für die Einführung in das Leistungstool verwendet. /devtools-performance-get-started/ Träge Animation
CSS:target-Pseudoklasse Wird für unterstützungserzwingen des CSS-Zustands :target verwendet. /devtools-target-pseudo/ CSS:target-Pseudoklassendemo
Heapmomentaufnahmeschnellansicht Quellcode für die Heap-Momentaufnahmeschnellansichtserweiterung für DevTools. /heap-Momentaufnahme-visualizer/ n/v
JSON-Dummydaten Einfache JSON-Dateien. Wird für die Ansicht formatierter JSON-Code verwendet. /json-dummy-data/ JSON-Dummydaten
Überprüfen der Netzwerkaktivität Wird für die Überprüfung der Netzwerkaktivität verwendet. /network-tutorial/ Untersuchen der Netzwerkaktivitätsdemo
Demo zur Fotogalerie Wird für Die Wahrheit zur CSS-Selektorleistung verwendet. /photo-gallery/ Fotogalerie
Demo zu langsamen Kalendern Eine einfache Kalenderdemo-App, die zum Testen verschiedener DevTools-Features verwendet wird, z. B. das Leistungstool oder die Unterstützung der Quellzuordnung. /slow-calendar/ Demo zu langsamen Kalendern
Demo zu Arbeitsbereichen Verwenden Sie zum Bearbeiten von Dateien mit Arbeitsbereichen (Registerkarte Dateisystem) im Tool Quellen . /Arbeitsbereiche/ Demo zu DevTools-Arbeitsbereichen

Einige dieser Beispiele sind unten dargestellt.

To Do-Demo

Diese einfache To-Do-Listenwebseite wird verwendet, um verschiedene DevTools-Features zu veranschaulichen. Es enthält eine .html Datei, eine .js Datei und .css Dateien:

To Do Demo und DevTools mit ausgewähltem Quellentool

Demowebseite mit Barrierefreiheitsproblemen

Diese Demo-Webseite für Tierheime 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 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 Demo-Webseite:

Quellcoderepository

Dies ist das Quellcoderepository und sein Verzeichnis, in dem die Dateien für diese Demowebseite gespeichert werden:

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

    • index.html – Die Demowebseite, einschließlich Seitenabschnitte und Eingabeformulare, 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.cssund dark-theme.css - CSS-Dateien, die die Darstellung der Demowebseite steuern.

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

Demo-Webseite: Debuggen von JavaScript mit DevTools

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

  1. Öffnen Sie die Demo-Webseite Erste Schritte Debuggen von JavaScript mit DevTools in einem neuen Fenster oder 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 durch die Verwendung dieser Demo-Webseite:

  • Der grundlegende Ansatz für die Verwendung eines Debuggers in der Übersicht über das Quellentool. Dieser Artikelabschnitt führt Sie kurz durch die Schritte zur Verwendung des JavaScript-Debuggers im Quellentool , 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 Demo-Webseite zusammen mit dem Debugger, zur Veranschaulichung verschiedener Features des Debuggers und zum Festlegen verschiedener Arten von Haltepunkten.

Quellcoderepository

Dies ist das Quellcoderepository und sein Verzeichnis, in dem die Dateien für diese Demowebseite gespeichert werden:

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

    • README.md – Enthält Links zur gerenderten Demo-Webseite und zum ausführlichen Tutorialartikel 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.

Herunterladen oder Klonen des Demos-Repositorys

Das Demos-Repository ist nützlich, um die verschiedenen DevTools-Dokumentationen zu befolgen.

Herunterladen des Demos-Repositorys

So laden Sie das Demos-Repository herunter:

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

  2. Klicken Sie auf die Dropdownschaltfläche Code und dann auf ZIP herunterladen.

    Die .zip Datei wird in Ihrem Downloadverzeichnis abgelegt. Entzippen Sie diese Webseitenquelldateien an einem 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 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.

Siehe auch:

Klonen des Demos-Repositorys

Das Klonen eines Repositorys ermöglicht das Aktualisieren Ihrer lokalen Kopie, wenn das Repository aktualisiert wird. Die GitHub-Benutzeroberfläche und verschiedene Tools unterstützen das Klonen. Wir zeigen das Klonen mithilfe von Visual Studio Code, aber Sie können viele andere Codierungstools wie GitHub Desktop, Visual Studio oder Git Bash Shell verwenden.

So klonen Sie das Repository:

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

  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 Dropdownschaltfläche Code und dann auf die Schaltfläche Kopieren neben der URL https://github.com/MicrosoftEdge/Demos.git. Sie können die URL dann beispielsweise in Git Bash oder in ein Visual Studio Code-Dialogfeld einfügen.

    Oder klicken Sie auf die Dropdownschaltfläche Code , und klicken Sie dann auf Mit Visual Studio öffnen , wenn sie angezeigt wird. Es wird eine Liste von Handlerauswahlelementen angeboten, eines pro Visual Studio instance installiert. Diese Option wird nur angezeigt, wenn Sie angemeldet sind.

    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.

Siehe auch:

Öffnen Sie einen Demoordner im Quellentool, und bearbeiten Sie eine Datei.

Um diesen Abschnitt zu verwenden, laden Sie zuerst das Demos-Repository herunter, oder klonen Sie es.

Um lokale Dateien im Quellentool zu bearbeiten, müssen Sie möglicherweise zuerst auf die Schaltfläche Zulassen klicken, um Lese-/Schreibzugriff zu gewähren. Führen Sie dazu die Schritte unter Öffnen eines Ordners von der Registerkarte Dateisystem (Arbeitsbereich) im folgenden Tool Quellen aus.

Siehe auch:

  • Ansätze, die in der Microsoft Edge DevTools-Erweiterung für Visual Studio Code verglichen werden. Fasst mehrere Optionen zum Bearbeiten von Webseitendateien zusammen und vergleicht sie.

Öffnen eines Ordners über die Registerkarte Dateisystem (Arbeitsbereich) im Quellentool

Nach dem Herunterladen oder Klonen des 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 Untersuchen 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 Symbolleiste Standard die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten (Symbol weitere Registerkarten).

  4. Wählen Sie auf der Registerkarte Quellen auf der linken Seite die Registerkarte Dateisystem aus, die mit der Registerkarte Seite gruppiert ist. Wenn die Registerkarte Dateisystem nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten (Schaltfläche Weitere Registerkarten).

  5. Klicken Sie auf + Ordner zum 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 dazu aufgefordert, "DevTools fordert Vollzugriff auf (Verzeichnis)" an. Klicken Sie auf die Schaltfläche Zulassen :

    DevTools fordert zugriff zum Hinzufügen eines Ordners zu einem Arbeitsbereich auf der Registerkarte Dateisystem an

Informationen zum Bearbeiten der Dateien finden Sie in den Bearbeitungsschritten im nächsten Abschnitt.

Siehe auch:

Öffnen einer lokalen HTML-Datei über das Dialogfeld Datei öffnen des Browsers und Bearbeiten der Datei über die Registerkarte Seite des Quellentools

Um Dateien im Quellentool zu bearbeiten, müssen Sie vor dem Ausführen der Schritte in diesem Abschnitt möglicherweise auf die Schaltfläche Zulassen klicken, um Lese-/Schreibzugriff zu gewähren, indem Sie die Schritte unter Öffnen eines Ordners von der Registerkarte Dateisystem (Arbeitsbereich) im Tool Quellen oben ausführen .

So öffnen Sie eine .html Datei und bearbeiten sie:

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

  2. Wählen Sie eine HTML-Datei aus der lokalen Kopie des Demos-Repositorys aus, z C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. B. . 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 Untersuchen 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 Symbolleiste Standard die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten (Symbol Weitere Registerkarten).

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

  6. Drücken Sie ESC , um die Drawer am unteren Rand von DevTools zu öffnen.

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

  8. Bearbeiten Sie im mittleren Editor-Bereich des Tools Quellen die .html Datei. Ändern Sie beispielsweise im demo-to-do/index.html Ordner in der Überschriftenzeile<h1> 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 Ordners von der Registerkarte Dateisystem (Arbeitsbereich) im obigen Tool Quellen ausführen.

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

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

  9. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um die Änderung zu speichern. Das Sternchen wird von der Registerkarteindex.html im Tool Quellen entfernt.

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

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

Öffnen einer lokalen HTML-Datei aus Explorer und Bearbeiten im Browser

  1. Wählen Sie in Explorer unter Windows oder finder unter macOS eine HTML-Datei aus der lokalen Kopie des Demos-Repositorys aus, zC:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. B. . Die .html Datei wird in Microsoft Edge geöffnet und gerendert.

  2. Führen Sie die Schritte in den obigen Abschnitten aus.

Öffnen eines Demoordners in Visual Studio Code

Nach dem Herunterladen oder Klonen des Demos-Repositorys:

  1. Klicken Sie in Visual Studio Code auf der Aktivitätsleiste auf die Schaltfläche Explorer (symbol Explorer). 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 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 im Explorer von Visual Studio Code geöffnet:

    Anfängliches Öffnen des Ordners

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

Siehe auch:

URL-Muster für gerenderte Demowebseiten und Quellcode

Die meisten Infodateien im Demos-Repository enthalten einen Link, über den die gerenderte .html Datei vom GitHub.io-Server geöffnet wird. Manchmal haben Sie eine URL für eine HTML-Quelldatei am GitHub.com. Stattdessen müssen Sie die github.io Server-URL ableiten, um die gerenderte Datei anzuzeigen, anstatt die Codeliste des .html Quellcodes im GitHub-Verzeichnis anzuzeigen.

Um von der URL für das Quellcodeverzeichnis unter GitHub.com in die URL für eine gerenderte Demowebseite um GitHub.io zu konvertieren, sieht das Muster wie folgt aus.

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

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

Die wichtigsten Komponenten dieser GitHub.com URL sind:

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

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

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

Um dieses GitHub.io URL-Muster auszufüllen, gehen Sie in diesem Beispiel wie folgt vor:

  • [org] ist MicrosoftEdge.
  • [Repository] ist Demos.
  • [pfad] ist demo-to-do.

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

  • https://MicrosoftEdge.github.io/Demos/demo-to-do/

Bei diesen URLs wird die Groß-/Kleinschreibung nicht beachtet.

Siehe auch

Öffnen und Bearbeiten von Dateien:

Herunterladen und Klonen:

Ausführen eines lokalen Webservers: