Navigieren in DevTools mit Hilfstechnologie

  • Artikel

Dieser Artikel hilft Ihnen bei der Verwendung von DevTools über die Tastatur und durch Hilfstechnologien wie Sprachausgaben. Dieser Leitfaden führt Sie durch die Tools und Registerkarten, die am besten zugänglich sind, und zeigt Probleme auf, die auftreten können.

Informationen zu DevTools-Features im Zusammenhang mit der Verbesserung der Barrierefreiheit einer Webseite finden Sie unter Features für Barrierefreiheitstests.

Toolpanels im Registerkartenformat mit Registerkarten und Seiten

Die Terminologie von Registerkarten, Tools und Bereichen finden Sie unter Toolpanels im Registerkartenformat, die Registerkarten und Seiten enthalten , in Der Übersicht über DevTools.

Technisch gesehen handelt es sich bei den Registerkarten um eine ARIA-Registerkartenliste.

Tastenkombinationen

Informationen zu den Standardtastenkombinationen für DevTools finden Sie unter Tastenkombinationen. Stellen Sie sicher, dass Sie es mit einem Lesezeichen versehen und darauf verweisen, während Sie die verschiedenen Tools erkunden.

DevTools öffnen

In Microsoft Edge können Sie DevTools mit der Maus oder Tastatur auf eine der folgenden Arten öffnen. Welches Tool geöffnet wird, hängt davon ab, wie Sie DevTools öffnen.

Hauptmethoden:

Aktion Resultierendes Tool
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite, und wählen Sie dann Untersuchen aus. Das Tool Elemente mit erweiterter DOM-Struktur, um das mit der rechten Maustaste geklickte Seitenelement anzuzeigen.
Drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). Das zuvor verwendete Tool oder das Willkommenstool .
Drücken Sie F12. Das zuvor verwendete Tool oder das Willkommenstool .

Weitere Möglichkeiten:

Aktion Resultierendes Tool
Wählen Sie auf der Microsoft Edge-Symbolleiste Einstellungen und mehr (Symbol >Weitere Tools>Entwicklungstools aus. Das zuvor verwendete Tool oder das Willkommenstool .
Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool .
Drücken Sie STRG+UMSCHALT+C (Windows, Linux) oder BEFEHL+WAHL+C (macOS). Das Tool Elemente mit erweiterter DOM-Struktur, um das <body> Element anzuzeigen.
Drücken Sie UMSCHALT+F10 , um das Kontextmenü zu öffnen. Um den Befehl Untersuchen auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Tool Elemente mit erweiterter DOM-Struktur, um das <html> Element anzuzeigen.
Drücken Sie TAB oder UMSCHALT+TAB , um den Fokus auf ein Seitenelement zu setzen. Drücken Sie dann UMSCHALT+F10 , um das Kontextmenü zu öffnen. Um den Befehl Untersuchen auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Tool Elemente mit erweiterter DOM-Struktur, um das fokussierte Seitenelement anzuzeigen.

Sie können zwischen den Tools navigieren, indem Sie die Tastaturnavigationstasten oder das Befehlsmenü verwenden.

  • Wenn DevTools geöffnet ist, drücken Sie STRG+] (Windows, Linux) oder BEFEHL+] (macOS), um den Fokus auf das nächste Tool auf der Aktivitätsleiste zu verschieben.
  • Drücken Sie STRG+[ (Windows, Linux) oder BEFEHL+[ (macOS), um den Fokus auf das vorherige Tool auf der Aktivitätsleiste zu verschieben.
  • Drücken Sie wiederholt TAB oder UMSCHALT+TAB , bis der Fokus auf die Registerkarten der Symbolleiste Aktivitätsleiste oder Schnellansicht wechselt, und verwenden Sie dann die Pfeiltasten, um zwischen den Tools zu wechseln.

Bekannte Probleme

  • Einige Tools, z. B. konsolen - und Leistungstools , verschieben den Fokus möglicherweise in den Inhaltsbereich des Tools, sobald das Tool ausgewählt ist. Dies kann die Navigation mit Pfeiltasten erschweren.

  • Der Name des ausgewählten Tools wird angekündigt, jedoch erst nach Ankündigung des fokussierten Inhalts im Tool. Diese Sequenz von Ankündigungen kann es leicht machen, den Namen des Tools zu verpassen.

Um ein bestimmtes Tool auszuwählen, verwenden Sie das Befehlsmenü. Im Befehlsmenü wird ein Tool entweder als Panel- oder Schnellansichtselement angezeigt.

  1. Wenn DevTools geöffnet ist, drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

    Das Befehlsmenü ist ein Kombinationsfeld für die AutoVervollständigen-Fuzzysuche.

  2. Geben Sie den Namen eines Tools ein, und verwenden Sie dann den NACH-UNTEN-PFEIL auf der Tastatur, um zur richtigen Option zu navigieren.

  3. Drücken Sie die EINGABETASTE , um einen Befehl auszuführen.

So öffnen Sie das Tool Elemente :

  1. Öffnen Sie das Befehlsmenü.

  2. Beginnen Sie mit der Eingabe von Elementen, wählen Sie den Befehl Elemente anzeigen aus, und drücken Sie dann die EINGABETASTE.

Wenn Sie ein Tool auf diese Weise öffnen, wird der Fokus auf den Inhaltsbereich des Tools gelegt. Im Fall des Elements-Tools wechselt der Fokus in die DOM-Struktur.

Das Tool "Elemente"

Überprüfen eines Elements auf der Seite

  1. Wechseln Sie mit dem Cursor in der Sprachausgabe zu dem Element, das Sie überprüfen möchten.

  2. Klicken Sie mit der rechten Maustaste auf das Element, und wählen Sie dann die Option Überprüfen aus. Dadurch wird das Tool Elemente geöffnet und das Element in der DOM-Struktur fokussiert.

Die DOM-Struktur ist als ARIA-Struktur angeordnet. Ein Beispiel finden Sie unter Navigieren in der DOM-Struktur mit einer Tastatur.

Kopieren des Codes für ein Element in der DOM-Struktur

  1. Klicken Sie mit der rechten Maustaste auf einen Knoten in der DOM-Struktur.

  2. Erweitern Sie die Option Kopieren .

  3. Wählen Sie OuterHTML kopieren aus.

Bekannte Probleme

  • Copy outerHTML wählt häufig nicht den aktuellen Knoten, sondern stattdessen den übergeordneten Knoten aus. Der Inhalt des Elements sollte sich jedoch weiterhin im kopierten outerHTMLbefinden.

Ändern der Attribute eines Elements in der DOM-Struktur

  • Wenn sich der Fokus auf einem Knoten der DOM-Struktur befindet, drücken Sie die EINGABETASTE , um den Knoten zu bearbeiten.

  • Drücken Sie die TAB-TASTE , um zwischen Attributwerten zu wechseln. Wenn Sie "Leerzeichen" hören, befinden Sie sich in einer leeren Texteingabe und können einen neuen Attributwert eingeben.

  • Drücken Sie STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS), um die Änderung zu übernehmen und den gesamten Inhalt des Elements zu hören.

Bekannte Probleme

  • Wenn Sie in die Texteingabe eingeben, erhalten Sie kein Feedback. Wenn Sie einen Tippfehler machen und die Pfeiltasten verwenden, um Ihre Eingabe zu untersuchen, erhalten Sie auch kein Feedback. Die einfachste Möglichkeit, Ihre Arbeit zu überprüfen, besteht darin, die Änderung zu akzeptieren und dann zu lauschen, bis das gesamte Element angekündigt wird.

Bearbeiten des HTML-Codes eines Elements in der DOM-Struktur

  • Wenn sich der Fokus auf einem Knoten der DOM-Struktur befindet, drücken Sie die EINGABETASTE , um den Knoten zu bearbeiten.

  • Drücken Sie die TAB-TASTE , um zwischen Attributwerten zu wechseln. Wenn Sie den Namen des Elements für instance hören, h2befinden Sie sich in einer Texteingabe, und Sie können den Typ des Elements ändern.

  • Drücken Sie STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS), um die Änderung zu übernehmen.

Wenn Sie beispielsweise h3 eingeben und dann STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS) drücken, ändern sich die Start- und Endtags des h3 Elements.

Registerkarten im Tool "Elemente"

Das Tool Elemente enthält zusätzliche Registerkarten zum Überprüfen von Dingen wie dem CSS, das auf ein Element angewendet wird, oder der relevanten Stelle in der Barrierefreiheitsstruktur.

  • Wenn sich der Fokus auf der DOM-Struktur befindet, drücken Sie die TAB-TASTE , bis Sie hören, dass der Bereich Formatvorlagen ausgewählt ist.

  • Drücken Sie die NACH-RECHTS-TASTE , um andere verfügbare Registerkarten zu erkunden.

Die DOM-Struktur wandelt Elemente mit href Attributen in fokussierbare Links um, sodass Sie möglicherweise mehrmals die TAB-TASTE drücken müssen, um zum Bereich Formatvorlagen zu gelangen.

Bekannte Probleme

Auf die Registerkarten DOM-Haltepunkte und Eigenschaften kann nicht über die Tastatur zugegriffen werden.

Bereich "Formatvorlagen"

Der Bereich Formatvorlagen verfügt über Steuerelemente zum Filtern von Formatvorlagen, zum Umschalten von Elementzuständen (z. B. :active und :focus), zum Umschalten von Klassen und zum Hinzufügen neuer Klassen. Es gibt auch ein leistungsstarkes Stilprüfungstool zum Untersuchen und Ändern von Stilen, die derzeit auf das Element angewendet werden, das den Fokus in der DOM-Struktur hat.

Das wichtigste Konzept des Bereichs Formatvorlagen ist, dass nur Stile für den aktuell ausgewählten Knoten in der DOM-Struktur angezeigt werden. Angenommen, Sie sind mit der Überprüfung der Stile eines <header> Knotens fertig und möchten sich nun die Stile für einen <footer> Knoten ansehen. Dazu müssen Sie zunächst den <footer> Knoten in der DOM-Struktur auswählen.

Möglicherweise ist es schneller, den Workflow Inspect zu verwenden, um einen Knoten zu überprüfen, der sich in der allgemeinen Nähe des footer Knotens befindet (z. B. ein Link in der Fußzeile), der die DOM-Struktur fokussiert, und dann die Tastatur verwenden, um genau zu dem Knoten zu navigieren, an dem Sie interessiert sind.

Da alle Stiltools auf die eine oder andere Weise wieder mit dem Bereich Formatvorlagen verbunden sind, ist es sinnvoll, zuerst ein Experte für dieses Tool zu werden.

  • Wenn der Fokus im Bereich Formatvorlagen angezeigt wird , drücken Sie die TAB-TASTE , um den Fokus in den Bereich zu verschieben und den Inhalt zu untersuchen.

  • Drücken Sie die TAB-TASTE , bis die erste Formatvorlage aktiv wird. Wenn Sie eine Sprachausgabe verwenden, wird diese erste Formatvorlage als element.style {}angekündigt.

  • Drücken Sie die NACH-UNTEN-TASTE , um in der Liste der Formatvorlagen in der Reihenfolge der Spezifität zu navigieren. Eine Sprachausgabe liest jede Formatvorlage vor, beginnend mit dem Namen der CSS-Datei, der Zeilennummer, auf der die Formatvorlage angezeigt wird, und dem Namen der Formatvorlage. Beispiel: main.css:233 .card__img {}.

  • Drücken Sie die EINGABETASTE , um eine Formatvorlage ausführlicher zu untersuchen. Der Fokus beginnt auf einer bearbeitbaren Version des Formatvorlagennamens.

  • Drücken Sie die TAB-TASTE , um zwischen bearbeitbaren Versionen jeder CSS-Eigenschaft und den entsprechenden Werten zu wechseln. Am Ende jedes Stilblocks befindet sich ein leeres bearbeitbares Textfeld, mit dem Sie zusätzliche CSS-Eigenschaften hinzufügen können.

  • Sie können weiterhin die TAB-TASTE drücken, um durch die Liste der Formatvorlagen zu navigieren, oder sie können die ESCAPE-Taste drücken, um den Modus zu beenden und mit den Pfeiltasten zur Navigation zurückzukehren.

Weitere Tastenkombinationen finden Sie unter Referenz zur Tastatur im Stilbereich.

Bekannte Probleme
  • Wenn Sie das bearbeitbare Textfeld Filter verwenden, können Sie nicht in der Liste der Formatvorlagen navigieren.

Elementstatus umschalten

So schalten Sie den Zustand eines Elements um, z :active . B. oder :focus:

  1. Wechseln Sie zum Bereich Formatvorlagen , und drücken Sie dann die TAB-TASTE , bis die Schaltfläche Elementzustand umschalten den Fokus hat.

  2. Drücken Sie die EINGABETASTE , um den Abschnitt Elementzustand erzwingen anzuzeigen, der Kontrollkästchen enthält.

  3. Drücken Sie die TAB-TASTE , bis der erste Zustand ( :active) den Fokus hat.

  4. Drücken Sie die LEERTASTE , um das Kontrollkästchen zu aktivieren (zu aktivieren). Wenn das aktuell ausgewählte Element in der DOM-Struktur über eine :active Formatvorlage verfügt, wird es jetzt angewendet.

  5. Drücken Sie die TAB-TASTE , um alle verfügbaren Zustände zu erkunden.

Hinzufügen einer vorhandenen Klasse

Die Schaltfläche Elementklassen befindet sich neben der Schaltfläche Elementzustand umschalten . Um den Fokus auf die Schaltfläche Elementklassen zu verschieben, drücken Sie tab, und drücken Sie dann die EINGABETASTE. Der Fokus wird in ein Textfeld mit der Bezeichnung Neue Klasse hinzufügen verschoben.

Die Schaltfläche Elementklassen wird hauptsächlich zum Hinzufügen vorhandener Klassen zu einem Element verwendet. Wenn Ihr Stylesheet z. B. eine Hilfsklasse mit dem Namen .clearfixenthält, können Sie innerhalb des Bearbeitungstextfelds drücken . , um eine Vorschlagsliste von Klassen anzuzeigen, und den Vorschlag mithilfe der NACH-UNTEN-TASTE suchen .clearfix . Oder geben Sie den Klassennamen selbst ein, und drücken Sie die EINGABETASTE , um ihn anzuwenden.

Hinzufügen einer neuen Stilregel

Neben der Schaltfläche Elementklassen befindet sich die Schaltfläche Neue Stilregel . Um den Fokus darauf zu verschieben, drücken Sie die TAB-TASTE und dann die EINGABETASTE. Der Fokus wechselt in ein bearbeitbares Textfeld innerhalb des Stilinspektors. Der anfängliche Textinhalt des Felds ist der Tagname des Elements, das in der DOM-Struktur ausgewählt ist. Sie können einen beliebigen Klassennamen in dieses Feld eingeben und dann die TAB-TASTE drücken, um ihm CSS-Eigenschaften zuzuweisen.

Registerkarte "Berechnet"

Drücken Sie mit dem Fokus auf der Registerkarte Berechnet die TAB-TASTE , um den Fokus nach innen zu verschieben und den Inhalt zu untersuchen. Auf der Registerkarte Berechnet gibt es Steuerelemente, mit denen Sie untersuchen können, welche CSS-Eigenschaften tatsächlich in der Reihenfolge der Spezifität auf ein Element angewendet werden.

Erkunden aller berechneten Stile

Drücken Sie die TAB-TASTE , bis Sie die Sammlung der berechneten Formatvorlagen erreicht haben. Berechnete Stile werden als ARIA-Struktur dargestellt. Beim Erweitern eines Listenfelds wird angezeigt, welche CSS-Selektoren den berechneten Stil anwenden. Diese Selektoren sind nach Spezifität organisiert. Eine Sprachausgabe liest den berechneten Wert, den css-Selektor derzeit abgleicht, den Dateinamen des Stylesheets, das den Selektor enthält, und die Zeilennummer für die Auswahl vor.

Bekannte Probleme

  • Wenn Sie das Textfeld Filter verwenden, können Sie Formatvorlagen nicht mehr überprüfen.

Registerkarte "Ereignislistener"

Um die Ereignislistener zu überprüfen, die auf ein Element angewendet werden, wählen Sie das Tool Elemente und dann die Registerkarte Ereignislistener (gruppiert mit der Registerkarte Formatvorlagen ) aus.

Wenn sich der Fokus auf der Registerkarte Formatvorlagen befindet, drücken Sie die NACH-RECHTS-TASTE , um zur Registerkarte Ereignislistener zu navigieren.

Erkunden von Ereignislistenern

Ereignislistener werden als ARIA-Struktur dargestellt. Sie können die Pfeiltasten verwenden, um sie zu navigieren. Eine Sprachausgabe liest den Namen des DOM-Objekts, an das der Ereignislistener angefügt ist, sowie den Dateinamen, in dem der Ereignislistener definiert ist, und die Zeilennummer vor.

Registerkarte "Barrierefreiheit"

Wählen Sie die TAB-TASTE aus, um sich auf der Registerkarte Barrierefreiheit im Tool Elemente zu bewegen.

Die Registerkarte Barrierefreiheit befindet sich in der Nähe der Registerkarte Formatvorlagen . Auf der Registerkarte Barrierefreiheit gibt es Steuerelemente zum Untersuchen der Barrierefreiheitsstruktur, der auf ein Element angewendeten ARIA-Attribute und der berechneten Barrierefreiheitseigenschaften. Weitere Informationen finden Sie unter Testen der Barrierefreiheit mithilfe der Registerkarte Barrierefreiheit.

Barrierefreiheitsstruktur

Die Barrierefreiheitsstruktur wird als ARIA-Struktur dargestellt, wobei jede treeitem struktur einem Element im DOM entspricht. Die Struktur gibt die berechnete Rolle für den ausgewählten Knoten an. Generische Elemente wie div und span werden in der Struktur als "GenericContainer" angekündigt. Verwenden Sie die Pfeiltasten, um die Struktur zu durchlaufen und beziehungen zwischen übergeordneten und untergeordneten Elementen zu untersuchen.

Bekannte Probleme

  • Der Typ der ARIA-Struktur , die von der Registerkarte Barrierefreiheit verwendet wird, wird in Microsoft Edge für macOS-Bildschirmsprachausgaben wie VoiceOver möglicherweise nicht ordnungsgemäß verfügbar gemacht. Abonnieren Sie Chromium Issue #868480, um über den Fortschritt dieses Problems informiert zu werden.
  • Jeder der Abschnitte ARIA-Attribute und Berechnete Eigenschaften ist als ARIA-Struktur gekennzeichnet, aber jeder Abschnitt verfügt derzeit nicht über eine Fokusverwaltung und kann nicht über die Tastatur ausgeführt werden.

Beibehalten der QuickInfo und der Rasterfarbüberlagerung des Tools "Überprüfen"

Wenn Sie auf die Schaltfläche Tool überprüfen klicken und sich auf der gerenderten Webseite bewegen, ändert sich die QuickInfo Überprüfen. Um die aktuelle QuickInfo- und Rasterfarbüberlagerung anzuzeigen, halten Sie STRG+ALT (Windows, Linux) oder STRG+WAHL (macOS) gedrückt, während Sie sich auf der gerenderten Webseite bewegen.

Diese Technik kann hilfreich sein, wenn Sie eine Bildschirmlupe oder andere Hilfstechnologien verwenden. Wenn Sie die QuickInfo des Inspect-Tools nicht beibehalten, ändert sich die Hover-Überlagerung ständig, wenn Sie das Tool Überprüfen (Schaltfläche Tool überprüfen) verwenden.

Weitere Informationen finden Sie unter Analysieren von Seiten mit dem Inspect-Tool.

Das Lighthouse-Tool

Lighthouse führt eine Reihe von Tests für eine Website durch, um auf häufige Probleme im Zusammenhang mit Leistung, Barrierefreiheit, SEO und einer Reihe anderer Kategorien zu überprüfen.

Konfigurieren und Generieren eines Berichts

  1. Wenn das Lighthouse-Tool zum ersten Mal in DevTools geöffnet wird, wird der Fokus auf die Schaltfläche Bericht generieren gesetzt. Standardmäßig ist das Formular so konfiguriert, dass Berichte für jede Kategorie mit mobiler Emulation auf einer simulierten 3G-Verbindung ausgeführt werden.

  2. Um die Berichtseinstellungen zu ändern, verwenden Sie UMSCHALT+TAB , um den Fokus auf die Lighthouse-Einstellungen zu setzen, oder navigieren Sie zurück im Durchsuchen-Modus.

  3. Wenn Sie bereit sind, den Bericht auszuführen, navigieren Sie zurück zur Schaltfläche Bericht generieren , und drücken Sie die EINGABETASTE.

  4. Der Fokus wird in ein modales Fenster mit der Schaltfläche Abbrechen verschoben, mit der Sie die Überwachung beenden können. Möglicherweise hören Sie eine Reihe von Ohrhörern, während die Überwachung ausgeführt wird und die Seite mehrmals aktualisiert wird.

Bekannte Probleme

  • Die verschiedenen Abschnitte des Konfigurationsformulars sind derzeit nicht mit einem fieldset -Element gekennzeichnet. Es kann einfacher sein, sie im Durchsuchen-Modus zu navigieren, um herauszufinden, welche Steuerelemente den einzelnen Abschnitten zugeordnet sind.
  • Es gibt keine Ankündigung von Earcon oder Live-Region, wenn die Ausführung der Überwachung abgeschlossen ist. Im Allgemeinen dauert die Überwachung etwa 30 Sekunden, danach sollten Sie zu den Ergebnissen navigieren können. Die Verwendung des Browse-Modus ist möglicherweise die einfachste Möglichkeit, die Ergebnisse zu erreichen.

Der Lighthouse-Bericht ist in Abschnitte unterteilt, die den einzelnen Überwachungskategorien entsprechen. Der Bericht wird mit einer Liste von Bewertungen für jede Kategorie geöffnet. Diese Bewertungen sind auch Links, die Sie verwenden können, um zu den relevanten Abschnitten zu springen. In jedem Abschnitt befinden sich erweiterbare details Elemente, die Informationen zu bestandenen oder fehlgeschlagenen Audits enthalten. Standardmäßig werden nur fehlerhafte Überwachungen angezeigt. Jeder Abschnitt endet mit einem letzten details Element, das alle erfolgreichen Überwachungen enthält.

Um eine neue Überwachung auszuführen, verwenden Sie UMSCHALT+TAB , um den Bericht zu beenden, und wählen Sie die Schaltfläche Bericht generieren aus.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Rob Dodson (Mitwirkender, Google WebFundamentals) geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.