Steuerfeld „Elemente“ – Übersicht

Dale St. Marthe

Im Bereich Elemente können Sie DOM-Elemente untersuchen und bearbeiten.

Übersicht

Der Bereich Elemente bietet eine robuste Schnittstelle zum Untersuchen und Bearbeiten des DOM. Sie können die DOM-Baumstruktur, die einem HTML-Dokument ähnelt, verwenden, um bestimmte DOM-Knoten auszuwählen und sie mit anderen Tools zu ändern.

Der Bereich Elemente enthält auch die folgenden Tabs mit relevanten Tools:

• Designs:

  • Hier können Sie CSS-Regeln aus allen Stylesheets ansehen und debuggen, die auf ein Element angewendet werden.
  • Finden Sie ungültiges, überschriebenes, inaktives oder anderes CSS, das nicht wie beabsichtigt funktioniert.
  • Sie können Elemente bearbeiten, indem Sie eine Deklaration hinzufügen, eine Klasse anwenden und mit dem Box-Modell interagieren.
  • Über Badges in der DOM-Baumstruktur können Sie auf Optionen zur Containerbearbeitung zugreifen.

• Berechnet: Hier werden die aufgelösten Eigenschaften aufgeführt, die auf ein Element angewendet werden, so wie sie von Chrome gerendert werden.

• Layout: Enthält Optionen zum Ändern von Raster- und Flexbox-Overlays.

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

• DOM-Haltepunkte: Hier werden DOM-Änderungshaltepunkte aufgeführt, die im Bereich „Elemente“ hinzugefügt wurden. Sie können sie aktivieren, deaktivieren, entfernen oder anzeigen.

• Eigenschaften: Wählen Sie einen DOM-Knoten aus, um die eigenen und vererbten Eigenschaften des Objekts zu untersuchen und zu sortieren.

• Barrierefreiheit: Hier werden Elemente mit ARIA-Labels und ihre Eigenschaften aufgeführt. Sie können die Baumansicht für Barrierefreiheit der Seite ein- und ausschalten und untersuchen.

Bereich „Elemente“ öffnen

Standardmäßig wird beim Öffnen der Entwicklertools der Bereich „Elemente“ geöffnet. Sie können auch einen Knoten auf der Seite untersuchen, um den Bereich Elemente automatisch zu öffnen.

So öffnen Sie den Bereich Elemente manuell:

1. Öffnen Sie die Entwicklertools.
2. Öffnen Sie das Befehlsmenü mit folgender Tastenkombination:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Geben Sie Elements ein, wählen Sie Elemente anzeigen aus und drücken Sie die Eingabetaste. Die Entwicklertools zeigen den Bereich Elemente in der Schublade unten im Entwicklertools-Fenster an.