Suchen und Beheben von Problemen mit dem Problemtool

  • Artikel

Das Tool Probleme analysiert automatisch die aktuelle Webseite, meldet Probleme gruppiert nach Typ und stellt Dokumentation bereit, um die Probleme zu erklären und zu beheben.

Das Tool Probleme bietet Feedback in den folgenden Kategorien:

  • Zugänglichkeit.
  • Browserübergreifende Kompatibilität.
  • Leistung.
  • Progressive Web-Apps.
  • Sicherheit.
  • Andere.

Feedback im Problemtool wird von mehreren Quellen bereitgestellt, darunter die Chromium-Plattform, Deque Axe, MDN-Browserkompatibilitätsdaten und Webhint. Informationen zu diesen Feedbackquellen, die das Tool "Probleme" füllen, finden Sie unter:

Öffnen des Issues-Tools

  1. Wechseln Sie zu einer Webseite, die probleme enthält, die behoben werden müssen. Öffnen Sie beispielsweise die Demoseite für Barrierefreiheitstests in einer neuen Registerkarte oder in einem neuen Fenster.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. DevTools wird geöffnet.

  3. Wählen Sie in der Symbolleiste Schnellansicht unten in DevTools die Registerkarte Probleme aus, die standardmäßig vorhanden ist.

    Wenn der Bereich Schnellansicht nicht angezeigt wird, wählen Sie DevTools anpassen und steuern (...) und dann Bereich "Schnellansicht (Esc) umschalten" aus. Wenn die Symbolleiste Schnellansicht nicht über die Registerkarte Probleme verfügt, klicken Sie auf der Symbolleiste Schnellansicht auf die Schaltfläche Weitere Tools (+), und wählen Sie dann Probleme aus.

    Das Tool Probleme gruppiert Probleme in Kategorien wie Barrierefreiheit, Leistung, Sicherheit und Andere:

    Kategorien von Problemen im Problemtool auf der Demoseite

Weitere Möglichkeiten zum Öffnen des Issues-Tools

  • Klicken Sie auf der Aktivitätsleiste oder in der Symbolleiste Schnellansicht auf die Schaltfläche Weitere Tools (+), und wählen Sie dann Probleme aus.

  • Suchen Sie im Tool Elemente in der DOM-Struktur nach einem wellenförmigen unterstrichenen Elementnamen, halten Sie dann die UMSCHALTTASTE gedrückt, und klicken Sie dann auf das Element. Oder klicken Sie mit der rechten Maustaste auf ein wellenbündig unterstrichenes Element, und wählen Sie dann Probleme anzeigen aus. Weitere Informationen finden Sie weiter unten unter Öffnen von Problemen aus der DOM-Struktur.

Tool für die Platzierung von Problemen: Schnellansicht oder Aktivitätsleiste

Standardmäßig, z. B. über das Befehlsmenü, wird das Tool Probleme im Bereich Schnellansicht geöffnet. Sie können es stattdessen in der Aktivitätsleiste öffnen oder in die Aktivitätsleiste verschieben:

  • Klicken Sie in der Symbolleiste Schnellansicht mit der rechten Maustaste auf die Registerkarte Untersuchen , und wählen Sie dann In die obere Aktivitätsleiste verschieben oder Aktivitätsleiste nach links verschieben aus.

Probleme werden automatisch nach Schweregrad sortiert.

Innerhalb jeder Problemkategorie werden zuerst die Fehler aufgelistet, dann Warnungen und dann Tipps:

Das Tool

Die Dropdownliste Schweregrad steuert, ob Die Elemente Warnungen, Fehler, Tipps und Informationen aufgelistet werden. Weitere Informationen finden Sie weiter unten unter Filtern von Problemen nach Schweregrad .

Erweitern von Einträgen im Problemtool

Das Tool "Probleme" enthält zusätzliche Dokumentation und empfohlene Korrekturen, die für jedes Problem gelten sollen. So erweitern Sie ein Problem, um diese zusätzlichen Informationen zu erhalten:

  1. Öffnen Sie eine Webseite und das Problemtool , wie oben beschrieben.

  2. Wählen Sie ein Problem aus. Das Problem wird erweitert, um Details anzuzeigen:

    Ein Problem, das im Problemtool erweitert wurde und zusätzliche Informationen zum Beheben des Problems anzeigt

Jedes angezeigte Problem weist die folgenden Komponenten auf:

  • Eine Überschrift, die das Problem beschreibt.

  • Eine Beschreibung, die mehr Kontext und Lösungsvorschläge bietet.

  • Ein Abschnitt BETROFFENE RESSOURCEN , der mit Ressourcen in DevTools verknüpft ist, z. B. dem Tool Elemente, Quellen oder Netzwerk .

  • Links zu weiteren Dokumentationen.

Anzeigen von Problemen im Kontext eines zugeordneten Tools

Ein Problem im Problemtool kann einen oder mehrere Links enthalten, die verschiedene Tools öffnen, z. B. das Tool Elemente, Quellen oder Netzwerk . Sie können eines dieser Tools öffnen, um zusätzliche Schritte zur Problembehandlung auszuführen.

So öffnen Sie ein verknüpftes Tool aus einem Eintrag im Tool Probleme :

  1. Öffnen Sie wie oben beschrieben eine Webseite, öffnen Sie DevTools, wählen Sie das Tool Probleme aus, und erweitern Sie dann ein Problem.

  2. Klicken Sie im Abschnitt BETROFFENE RESSOURCEN in einem Link Öffnen in auf den Namen des Tools, z. B. Netzwerk:

    Das Tool Netzwerk wird geöffnet, wenn Sie einen Netzwerkressourcenlink auswählen.

    Die betroffene Ressource wird im angegebenen Tool angezeigt.

Öffnen von Problemen aus der DOM-Struktur

Wenn einem Element ein Problem zugeordnet ist, zeigt die DOM-Struktur im Tool Elemente unter dem Elementnamen eine wellenförmige Unterstreichung an. Klicken Sie mit der rechten Maustaste auf das Element, und wählen Sie dann Probleme anzeigen aus. Oder halten Sie die UMSCHALTTASTE gedrückt, und klicken Sie dann auf das Element mit der wellenförmigen Unterstreichung.

So zeigen Sie ein Problem für Elemente mit wellenförmigen Unterstreichungen in der DOM-Struktur an:

  1. Öffnen Sie eine Webseite. Öffnen Sie beispielsweise die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Wählen Sie in DevTools die Registerkarte Elemente (Symbol ") aus.

  4. Erweitern Sie <body><main>>><img><section>><article id="cats">>in der DOM-Struktur . Das <img> Starttag des Elements weist eine wellenförmige Unterstreichung auf:

    Wellen unterstrichene Probleme in der DOM-Struktur im Tool Elemente

  5. Zeigen Sie auf das Starttag des <img> Elements. Eine QuickInfo zeigt Informationen zum Problem an.

  6. Klicken Sie mit der rechten Maustaste auf das <img> Element, und wählen Sie dann Probleme anzeigen aus. Oder halten Sie die UMSCHALTTASTE gedrückt, und klicken Sie dann auf das Element. Das Tool Issues wird geöffnet und zeigt die Probleme an, die diesem Element zugeordnet sind:

    Details zu Problemen mit einem wellenförmigen unterstrichenen Element in der DOM-Struktur

Filterprobleme

Um die Anzahl der Probleme zu reduzieren, die im Problemtool angezeigt werden, können Sie die Liste nach Schweregrad, Browser und Ursprung filtern.

Filtern von Problemen nach Schweregrad

Standardmäßig werden nur Fehler und Warnungen angezeigt. So zeigen Sie Probleme mit anderen Schweregraden an:

  • Wählen Sie in der Dropdownliste Schweregrad eine beliebige Anzahl von Schweregraden aus: Tipps, Informationen, Warnungen oder Fehler:

Bereich

Um rückgängig machen, nur Warnungen und Fehler anzuzeigen, wählen Sie Standardebenen aus.

Filtern von Problemen nach Browser

Probleme, die zur Kategorie Kompatibilität gehören, können auch nach Browser gefiltert werden. Standardmäßig werden die folgenden Browser getestet:

  • Edge
  • Chrom
  • Firefox
  • Safari
  • Safari iOS
  • Chrome für Android
  • Firefox für Android

So ändern Sie die Liste der Browser, die auf Kompatibilitätsprobleme getestet wurden:

  • Klicken Sie auf Top-Browser.
  • Wählen Sie einen der Browserkategorien aus: Top-Browser, Desktopbrowser, Mobile Browser.
  • Oder wählen Sie eine beliebige Anzahl einzelner Browser aus der Liste aus.
  • Klicken Sie auf Probleme neu generieren , um die Kompatibilitätsprobleme basierend auf den ausgewählten Browsern zu aktualisieren.

Bereich

Filtern von Problemen nach Ursprung

Standardmäßig listet das Tool Probleme nur Probleme auf, die sich auf den Code der aktuellen Webseite beziehen. Um Probleme einzuschließen, die durch Bibliotheken oder Frameworks von Drittanbietern verursacht werden, die ebenfalls von der Webseite geladen wurden, aktivieren Sie das Kontrollkästchen Probleme von Drittanbietern einschließen :

Bereich

Weitere Informationen

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Sam Dutton (Developer Advocate) verfasst. Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.