Im Bereich Elemente können Sie DOM-Elemente prüfen und bearbeiten.
Überblick
Der Bereich Elemente bietet eine robuste Oberfläche zum Untersuchen und Bearbeiten des DOM. Mithilfe der DOM-Baumstruktur, die 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:
- CSS-Regeln ansehen und debuggen, die in allen Stylesheets auf ein Element angewendet werden
- Suchen Sie nach ungültigen, überschriebenen, inaktiven oder anderen CSS, die nicht wie vorgesehen funktionieren.
- Zum Bearbeiten von Elementen fügen Sie eine Deklaration hinzu, wenden eine Klasse an und interagieren mit dem Box-Modell.
- Über die Badges im DOM-Baum können Sie auf die Bearbeitungsoptionen für Container zugreifen.
Berechnet: Listet aufgelöste Eigenschaften auf, die auf ein Element angewendet werden, während sie von Chrome gerendert werden.
Layout: Enthält Optionen zum Ändern von Raster- und Flexbox-Overlays.
Ereignis-Listener: Listet alle Ereignis-Listener und deren 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, und können diese aktivieren, deaktivieren, entfernen oder anzeigen.
Eigenschaften: Wählen Sie einen DOM-Knoten aus, um die eigenen und übernommenen Eigenschaften des Objekts zu prüfen und zu sortieren.
Bedienungshilfen: Listet Elemente mit ARIA-Labels und ihre Eigenschaften auf. Damit können Sie den Baum für Barrierefreiheit aktivieren und deaktivieren (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 der Bereich Elemente in der Leiste unten im Fenster angezeigt.