Beispielcode für DevTools

Der Beispielcode, der in der DevTools-Dokumentation verwendet wird, befindet sich hauptsächlich im MicrosoftEdge/Demos-Repository unter GitHub.

Demowebseite mit Barrierefreiheitsproblemen

Diese Demowebseite ist nützlich, um verschiedene DevTools-Features zu erkunden.

1. Öffnen Sie die Demowebseite 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 "Überprüfen" aus. DevTools wird neben der Demowebseite geöffnet.

Artikel

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

• Übersicht über Barrierefreiheitstests mitHilfe von DevTools – Langer Artikel mit Abschnitten, in denen die Verwendung verschiedener DevTools-Features für Barrierefreiheitstests mithilfe der "Demowebseite mit Barrierefreiheitsproblemen" veranschaulicht wird.

• Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen . Einer von mehreren kurzen Artikeln, die aus Abschnitten des obigen Artikels abgeleitet sind.

• Barrierefreiheitstests – Eine Liste der Features für Barrierefreiheitstests von DevTools mit Links zu mehreren Artikeln, die die "Demowebseite mit Barrierefreiheitsproblemen" verwenden.

Quellcode-Repository

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

• MicrosoftEdge/Demos > devtools-a11y-testing – Enthält Dateien, einschließlich:

  • index.html - Die Demowebseite, 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 Demowebseite.

  • buttons.js - Enthält den JavaScript-Code, der von der Demowebseite verwendet wird.

  • styles.css, light-theme.cssund dark-theme.css - CSS-Dateien, die die Präsentation der Demowebseite steuern.

  • Bilddateien, die auf der Demowebseite verwendet werden.

Demowebseite: Debuggen von JavaScript mit DevTools

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

1. Öffnen Sie die Demowebseite 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 "Überprüfen" aus. DevTools wird neben der Demowebseite geöffnet.

Artikel

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

• Der grundlegende Ansatz für die Verwendung eines Debuggers in der Übersicht über das Quellentool. In diesem Artikelabschnitt werden Sie kurz durch die Schritte zur Verwendung des JavaScript-Debuggers im Tool "Quellen " geführt, um den Fehler auf der Demowebseite zu finden. Um den Fehler zu beheben, konvertieren Sie die Eingabezeichenfolgen in Zahlen, bevor Sie sie hinzufügen.

• Erste Schritte Debuggen von JavaScript – Eine ausführlichere exemplarische Vorgehensweise zur Verwendung der Demowebseite zusammen mit dem Debugger, zum Demonstrieren 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 Demowebseite gespeichert werden:

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

  • README.md - Enthält Links zur gerenderten Demowebseite und den ausführlichen Lernprogrammartikel zur Verwendung der Demowebseite.

  • index.html - Die Webseite mit einem Eingabeformular, das Daten an die JavaScript-Datei sendet und das Ergebnis von JavaScript anzeigt.

  • get-started.js - Die JavaScript-Datei, die vom Formular auf der Demowebseite verwendet wird.

URL-Muster für gerenderte Demowebseiten und Quellcode

Um zwischen der URL für eine gerenderte Demowebseite und der URL für den Quellcode bei GitHub zu konvertieren, sind die Muster wie folgt.

Muster

• URL für die gerenderte Demowebseite: https://[org].github.io/[repo]/[path]

• URL für den Quellcode der Webseite: https://github.com/[org]/[repo]/tree/main/[path]

Groß-/Kleinschreibung wird nicht beachtet.

Beispiel

• URL für die gerenderte Demowebseite: https://MicrosoftEdge.github.io/Demos/devtools-a11y-testing/

• URL für den Quellcode der Webseite: https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing/

• Org = MicrosoftEdge

• Repository = Demos

• Path = /devtools-a11y-testing/