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:
Klicken Sie auf einer Infodateiseite auf den Link Demo . Die Liveseite wird in Microsoft Edge geöffnet.
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.
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:
Gerenderte Seite: TODO-App
Quellcode: demo-to-do
Demowebseite mit Barrierefreiheitsproblemen
Diese Demo-Webseite für Tierheime ist nützlich, um verschiedene DevTools-Features zu erkunden, einschließlich Features für Barrierefreiheitstests.
Öffnen Sie die Demo-Webseite mit Barrierefreiheitsproblemen in einem neuen Fenster oder einer neuen Registerkarte.
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.
Artikel
Diese Artikel führen Sie durch die Verwendung dieser Demo-Webseite:
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.
Features für Barrierefreiheitstests : Eine Liste der Features für Barrierefreiheitstests von DevTools mit Links zu mehreren Artikeln, die die "Demo-Webseite mit Barrierefreiheitsproblemen" verwenden.
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 diebuttons.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
unddark-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.
Öffnen Sie die Demo-Webseite Erste Schritte Debuggen von JavaScript mit DevTools in einem neuen Fenster oder einer neuen Registerkarte.
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.
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:
Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zum Repository MicrosoftEdge/Demos .
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:
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:
- Laden Sie das WebView2Samples-Repository unter Einrichten Ihrer Entwicklungsumgebung für WebView2 herunter.
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:
Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zum Repository MicrosoftEdge/Demos .
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.
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.
Klicken Sie in Visual Studio Code in der Aktivitätsleiste auf die Schaltfläche Quellcodeverwaltung () und dann auf die Schaltfläche Repository klonen .
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.
Navigieren Sie zum gewünschten Pfad, z
C:\Users\username\Documents\GitHub
. B. oderUsers/username/GitHub
, und klicken Sie dann auf die Schaltfläche Repositoryspeicherort auswählen .Die Meldung Git-Repository klonen wird angezeigt, und Sie werden aufgefordert, das geklonte Repository zu öffnen. Klicken Sie auf die Schaltfläche Öffnen :
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:
- Klonen eines Repositorys : GitHub-Dokumentation.
- Klonen Sie das WebView2Samples-Repository unter Einrichten Ihrer Entwicklungsumgebung für WebView2.
Ö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:
Öffnen Sie in Microsoft Edge eine neue Registerkarte.
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.
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 ().
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 ().
Klicken Sie auf + Ordner zum Arbeitsbereich hinzufügen. Ein Dialogfeld zur Ordnerauswahl wird geöffnet.
Wählen Sie einen bestimmten Ordner aus, z. B. demo-to-do, oder wählen Sie den Stammordner Demos aus:
Oberhalb von DevTools werden Sie dazu aufgefordert, "DevTools fordert Vollzugriff auf (Verzeichnis)" an. Klicken Sie auf die Schaltfläche Zulassen :
Informationen zum Bearbeiten der Dateien finden Sie in den Bearbeitungsschritten im nächsten Abschnitt.
Siehe auch:
- Bearbeiten von Dateien mit Arbeitsbereichen (Registerkarte Dateisystem), um einen lokalen Ordner im Quellentool von DevTools im Browser zu öffnen.
- Verwenden der Registerkarte Dateisystem zum Definieren eines lokalen Arbeitsbereichs in der Übersicht über das Quellentool.
Ö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:
Ö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.
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.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.
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 ().
Wählen Sie in DevTools auf der linken Seite die Registerkarte Seite und dann die HTML-Datei aus, z
index.html
. B. oder (Index).Drücken Sie ESC , um die Drawer am unteren Rand von DevTools zu öffnen.
Klicken Sie in der Schublade auf die Schaltfläche Weitere Tools (), und wählen Sie dann das Tool Änderungen aus.
Bearbeiten Sie im mittleren Editor-Bereich des Tools Quellen die
.html
Datei. Ändern Sie beispielsweise imdemo-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:
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.
Aktualisieren Sie die Seite. Die Änderung wird auf der gerenderten Webseite angezeigt. Beispielsweise wird das geänderte Wort dem Titel hinzugefügt:
Öffnen einer lokalen HTML-Datei aus Explorer und Bearbeiten im Browser
Wählen Sie in Explorer unter Windows oder finder unter macOS 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.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:
Klicken Sie in Visual Studio Code auf der Aktivitätsleiste auf die Schaltfläche Explorer (). Der bereich Explorer wird geöffnet.
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 :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:
Alternativ können Sie den Stammordner des Demos-Repositorys öffnen, um alle Demoordner im bereich Explorer zu erkunden.
Siehe auch:
- Microsoft Edge DevTools-Erweiterung für Visual Studio Code zum Öffnen eines lokalen Ordners in Visual Studio Code und Verwenden von DevTools in Visual Studio Code.
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:
- Bearbeiten von Dateien mit Arbeitsbereichen (Registerkarte Dateisystem), um einen lokalen Ordner im Quellentool von DevTools im Browser zu öffnen.
- Verwenden der Registerkarte Dateisystem zum Definieren eines lokalen Arbeitsbereichs in der Übersicht über das Quellentool.
- 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.
- Microsoft Edge-IDE-Integration : Webseiten-App-Entwicklung mit Visual Studio Code oder Visual Studio, einschließlich Microsoft Edge DevTools.
Herunterladen und Klonen:
- Schritt 5: Klonen Sie das Demos-Repository unter Installieren der DevTools-Erweiterung für Visual Studio Code.
- Klonen eines Repositorys : GitHub-Dokumentation.
Ausführen eines lokalen Webservers:
- Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.