Suchen und Beheben von Problemen mit dem Problemtool

  • Artikel
  • 4 Minuten Lesedauer

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

Das Problemtool bietet Feedback in den folgenden Kategorien:

  • Zugänglichkeit.
  • Kompatibilität zwischen Browsern.
  • Leistung.
  • Progressive Web-Apps.
  • Sicherheit.
  • Andere.

Feedback im Problemtool wird von mehreren Quellen bereitgestellt, einschließlich der Chromium-Plattform, Deque axe, MDN-Browserkompatibilitätsdaten und Webhint. Informationen zu diesen Feedbackquellen , die das Problemtool auffüllen, finden Sie unter:

Öffnen des Tools "Probleme"

  1. Wechseln Sie zu einer Webseite, die Zu behebenden Probleme enthält. Öffnen Sie beispielsweise die Demoseite für Barrierefreiheitstests in einer neuen Registerkarte oder einem neuen Fenster.

  2. Öffnen Sie DevTools. Nach einigen Sekunden wird der Problemindikator (Problemindikator) in der oberen rechten Ecke von DevTools angezeigt.

  3. Aktualisieren Sie die Seite, da einige Probleme basierend auf Netzwerkanforderungen gemeldet werden. Beachten Sie die aktualisierte Anzahl im Problemindikator.

  4. Wählen Sie den Problemindikator aus. Das Tool "Probleme " wird mit Problemen geöffnet, die in verschiedene Kategorien gruppiert sind.

    Kategorien von Problemen im Problemtool auf der Demoseite

Weitere Möglichkeiten zum Öffnen des Tools "Probleme"

Es gibt mehrere zusätzliche Möglichkeiten zum Öffnen des Tools "Probleme ":

  • Klicken Sie im Hauptbereich oder in der Schublade auf das Menü "Weitere Tools(+)", und wählen Sie dann "Probleme" aus.
  • Wählen Sie "Anpassen" aus, und steuern Sie DevTools > Weitere Tools > Probleme.
  • Drücken Sie in der DOM-Struktur im Elementtool den Namen eines wellig unterstrichenen Elements, und klicken Sie dann darauf.Shift Oder öffnen Sie das Kontextmenü für ein wellenförmiges unterstrichenes Element, und wählen Sie dann " Probleme anzeigen" aus.

Probleme werden automatisch nach Schweregrad sortiert.

In jeder Kategorie von Problemen werden zuerst die Fehler aufgelistet, dann Warnungen und dann Tipps.

Das Tool "Probleme" zeigt Leistungsprobleme sortiert nach Schweregrad an.

Erweitern von Einträgen im Tool "Probleme"

Das Problemtool enthält zusätzliche Dokumentation und empfohlene Korrekturen, die für jedes Problem gelten. Um ein Problem zu erweitern, um diese zusätzlichen Informationen zu erhalten, wählen Sie ein Problem wie folgt aus.

  1. Öffnen Sie die Demoseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte, und öffnen Sie dann DevTools.

  2. Öffnen Sie das Problemtool, indem Sie den Problemindikator (Problemindikator) auswählen.

  3. Wählen Sie ein Problem aus, um das Problem zu erweitern.

    Das Problemtool mit zusätzlichen Informationen zum Beheben des Problems

Jedes angezeigte Problem weist die folgenden Komponenten auf:

  • Eine Schlagzeile, die das Problem beschreibt.

  • Eine Beschreibung, die mehr Kontext und vorgeschlagene Lösungen bereitstellt.

  • 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 Tool "Probleme " 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 über das Tool "Probleme ":

  1. Wie im vorherigen Abschnitt beschrieben, öffnen Sie die Demoseite, und erweitern Sie dann ein Problem im Tool "Probleme ".

  2. Wählen Sie in AFFECTED RESOURCES > Open in den Toolnamen aus. Die betroffene Ressource wird im ausgewählten Tool angezeigt:

    Wählen Sie ein Tool aus, um eine betroffene Ressource im Tool "Probleme" zu öffnen.

    Ein erweitertes Problem kann eine Netzwerkverbindung aufweisen, um die betroffene Ressource im Netzwerktool anzuzeigen:

    Das Netzwerktool wird geöffnet, wenn Sie eine Netzwerkressourcenverknüpfung auswählen.

Öffnen von Problemen aus der DOM-Struktur

Wenn einem Element ein Problem zugeordnet ist, zeigt die DOM-Struktur im Elementtool eine wellenförmige Unterstreichung unter dem Elementnamen an. Klicken Sie mit der rechten Maustaste auf das Element, und wählen Sie dann " Probleme anzeigen" aus. Oder halten Shift Sie 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 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 "Überprüfen" aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

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

  4. Erweitern Sie <body>``<main>``<article id="cats"> > <section> > > in der DOM-Struktur . Beachten Sie, dass das <img> Element eine wellenförmige Unterstreichung aufweist.

    Wavy-underlined issues in the DOM tree in the Elements tool

  5. Zeigen Sie auf das <img> Element. Eine QuickInfo zeigt Informationen zu dem Problem an.

  6. Öffnen Sie das Kontextmenü des Elements mit wellenförmiger Unterstreichung, und wählen Sie dann " Probleme anzeigen" aus. Das Problemtool wird geöffnet und zeigt das Problem an, das diesem Element zugeordnet ist.

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

Filterprobleme

Um die Anzahl der im Tool "Probleme " angezeigten Probleme zu verringern, können Sie die Liste nach Schweregrad, Browser und Ursprung filtern.

Filtern nach Schweregrad

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

  • Klicken Sie auf "Standardebenen".
  • Wählen Sie eine beliebige Anzahl von Schweregraden aus: Tipps, Informationen, Warnungen, Fehler.
  • Wählen Sie "Standard" aus, um auf nur Warnungen und Fehler zurückgesetzt zu werden.

Der Bereich "Probleme" mit erweiterter Dropdownliste "Schweregrad" mit den verschiedenen Ebenen, die ausgewählt werden können.

Nach Browser filtern

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 Browserkategoriesätze 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.

Der Bereich "Probleme" mit erweiterter Dropdownliste "Browser" mit den verschiedenen Browsern, die ausgewählt werden können.

Nach Ursprung filtern

Standardmäßig listet das Tool "Probleme " nur Probleme auf, die sich auf den Code der aktuellen Webseite beziehen. Aktivieren Sie das Kontrollkästchen "Probleme von Drittanbietern einschließen ", um Auch Probleme einzuschließen, die von Drittanbieterbibliotheken oder Frameworks verursacht werden, die von der Webseite geladen werden.

Der Bereich "Probleme" mit dem Kontrollkästchen "Probleme von Drittanbietern einschließen".

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. Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.