Im Bereich Elemente können Sie DOM-Elemente untersuchen und bearbeiten.
Übersicht
Der Bereich Elemente bietet eine robuste Oberfläche zum Untersuchen und Bearbeiten des DOM. Sie können den DOM-Baum, der 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:
- CSS-Regeln aus allen Stylesheets ansehen und debuggen, die auf ein Element angewendet werden.
- Ungültiges, überschriebenes, inaktives oder anderes CSS finden, das nicht wie beabsichtigt funktioniert.
- Elemente bearbeiten, indem Sie eine Deklaration hinzufügen, eine Klasse anwenden und mit dem Box-Modell interagieren.
- Über Badges im DOM-Baum auf Optionen zum Bearbeiten von Containern 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-Breakpoints: Hier werden DOM-Änderungs-Breakpoints 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 einen Baum für Barrierefreiheit ein- und ausblenden und untersuchen (experimentell).
Bereich „Elemente“ öffnen
Wenn Sie die Entwicklertools öffnen, wird standardmäßig 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:
- Öffnen Sie die Entwicklertools.
- Öffnen Sie das Befehlsmenü mit folgender Tastenkombination:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Geben Sie
Elementsein, wählen Sie Elemente anzeigen aus und drücken Sie die Eingabetaste. In den Entwicklertools wird der Bereich Elemente in der Schublade unten im Entwicklertools-Fenster angezeigt.