Steuerfeld „Elemente“ – Übersicht

Dale St. Marthe

Im Bereich Elemente können Sie DOM-Elemente prüfen und bearbeiten.

Übersicht

Der Bereich Elemente bietet eine robuste Oberfläche zum Prüfen und Manipulieren des DOM. Mit dem DOM-Baum, der einem HTML-Dokument ähnelt, können Sie bestimmte DOM-Knoten auswählen und mit anderen Tools ändern.

Der Bereich Elemente enthält außerdem die folgenden Tabs mit relevanten Tools:

• Stile:

  • Sie können CSS-Regeln ansehen und beheben, die aus allen Stylesheets auf ein Element angewendet werden.
  • Suchen Sie nach ungültigen, überschriebenen, inaktiven oder anderen CSS-Dateien, die nicht wie vorgesehen funktionieren.
  • Bearbeiten Sie Elemente, indem Sie eine Deklaration hinzufügen, eine Klasse anwenden und mit dem Box-Modell interagieren.
  • Über Badges im DOM-Baum können Sie auf Optionen zur Containerbearbeitung zugreifen.

• Berechnet: Listet aufgelöste Eigenschaften auf, die auf ein Element angewendet werden, während es von Chrome gerendert wird.

• Layout: Hier finden Sie Optionen zum Ändern von Raster- und Flexbox-Overlays.

• Ereignis-Listener: Hier werden alle Ereignis-Listener und ihre Attribute aufgeführt. Hier können Sie die Quelle von Event-Listenern ermitteln und nach passiven oder blockierenden Listenern filtern.

• DOM-Haltepunkte: Hier werden DOM-Änderungs-Haltepunkte aufgelistet, die über den Bereich „Elemente“ hinzugefügt wurden. Sie können sie aktivieren, deaktivieren, entfernen oder anzeigen.

• Properties (Eigenschaften): Wählen Sie einen DOM-Knoten aus, um die eigenen und übernommenen Eigenschaften des Objekts zu prüfen und zu sortieren.

• Barrierefreiheit: Hier werden Elemente mit ARIA-Labels und ihre Eigenschaften aufgeführt. Hier können Sie einen Baum für die Barrierefreiheit ein- und ausblenden und prüfen (experimentell).

Bereich „Elemente“ öffnen

Wenn Sie die Entwicklertools öffnen, wird standardmäßig der Bereich „Elemente“ geöffnet. Sie können auch einen Knoten an einer beliebigen Stelle auf der Seite prüfen, um das Steuerfeld Elemente automatisch zu öffnen.

So öffnen Sie den Bereich Elemente manuell:

1. Öffnen Sie die Entwicklertools.
2. Drücken Sie eine der folgenden Tasten, um das Befehlsmenü zu öffnen:
   • macOS: Befehlstaste + Umschalttaste + P
   • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
3. Geben Sie Elements ein, wählen Sie Elemente anzeigen aus und drücken Sie die Eingabetaste. In den Entwicklertools wird der Bereich Elemente im Schieberegler unten im Fenster angezeigt.