Im Bereich Elemente können Sie DOM-Elemente überprüfen und bearbeiten.
Überblick
Der Bereich Elemente bietet eine robuste Oberfläche zur Prüfung und Bearbeitung des DOM. Sie können die DOM-Struktur, die einem HTML-Dokument ähnelt, verwenden, um bestimmte DOM-Knoten auszuwählen und mit anderen Tools zu ändern.
Der Bereich Elemente enthält außerdem die folgenden Tabs mit relevanten Tools:
Stile:
- CSS-Regeln, die auf ein Element aus allen Stylesheets angewendet wurden, ansehen und Fehler beheben
- Suchen Sie alle ungültigen, überschriebenen, inaktiven oder sonstigen CSS, die nicht wie vorgesehen funktionieren.
- Sie können Elemente bearbeiten, indem Sie eine Deklaration hinzufügen, eine Klasse anwenden und mit dem Box-Modell interagieren.
- Über die Badges in der DOM-Struktur können Sie auf die Optionen zum Bearbeiten von Containern zugreifen.
Berechnet: Listen aufgelöste Eigenschaften, die auf ein Element angewendet werden, wenn sie von Chrome gerendert werden.
Layout: Enthält Optionen zum Ändern von Raster- und Flexbox-Overlays.
Event-Listener: Führt alle Event-Listener und ihre Attribute auf. Damit können Sie die Quelle von Ereignis-Listenern finden und nach passiven oder blockierenden Listenern filtern.
DOM-Haltepunkte: Listet DOM-Änderungshaltepunkte auf, die aus dem Steuerfeld „Elemente“ hinzugefügt wurden. Sie können sie aktivieren, deaktivieren, entfernen oder anzeigen.
Attribute: Wählen Sie einen DOM-Knoten aus, um die eigenen und übernommenen Eigenschaften des Objekts zu untersuchen und zu sortieren.
Bedienungshilfen: Führt Elemente mit ARIA-Labels und ihre Eigenschaften auf. Ermöglicht das Ein- und Ausblenden einer Baumstruktur für Barrierefreiheit (experimentell).
Steuerfeld "Elemente" öffnen
Wenn Sie die Entwicklertools öffnen, wird standardmäßig der Bereich „Elemente“ geöffnet. Sie können auch an einer beliebigen Stelle auf der Seite einen Knoten prüfen, um automatisch den Bereich Elemente zu öffnen.
So öffnen Sie den Bereich Elemente manuell:
- Öffnen Sie die Entwicklertools.
- Öffnen Sie das Befehlsmenü durch Drücken von:
- macOS: Befehlstaste + Umschalttaste + P
- Windows, Linux, ChromeOS: Strg + Umschalttaste + P
- Beginnen Sie mit der Eingabe von
Elements, wählen Sie Elemente anzeigen aus und drücken Sie die Eingabetaste. In den Entwicklertools wird unten im Entwicklertools-Fenster unter Drawer das Steuerfeld Elemente angezeigt.