In dieser umfassenden Referenz zu Chrome-Entwicklertools-Funktionen zum Ansehen und Ändern von CSS finden Sie neue Workflows.
Element auswählen
Im Bereich Elemente der Entwicklertools können Sie das CSS eines Elements einzeln ansehen oder ändern.
Im Screenshot ist das Element h1, das im DOM-Baum blau hervorgehoben ist, das ausgewählte Element.
Rechts werden die Formatierungen des Elements auf dem Tab Stile angezeigt. Links wird das Element im Viewport hervorgehoben, aber nur, weil sich der Mauszeiger im DOM-Baum darauf befindet.
Eine Anleitung finden Sie unter CSS eines Elements ansehen.
Es gibt viele Möglichkeiten, ein Element auszuwählen:
- Klicken Sie im Ansichtsfenster mit der rechten Maustaste auf das Element und wählen Sie Untersuchen aus.
- Klicken Sie in den DevTools auf Element auswählen
oder drücken Sie Befehlstaste + Umschalttaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux) und klicken Sie dann auf das Element im Darstellungsbereich. - Klicken Sie in den DevTools im DOM-Baum auf das Element.
- Führen Sie in den Entwicklertools eine Abfrage wie
document.querySelector('p')in der Konsole aus, klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie dann Im Bereich „Elemente“ anzeigen aus.
Preisvergleichsportal ansehen
Auf den Tabs Elemente > Stile und Berechnet können Sie CSS-Regeln ansehen und CSS-Probleme diagnostizieren.
Mit Links navigieren
Auf dem Tab Stile werden Links an verschiedenen Stellen zu verschiedenen anderen Orten angezeigt, unter anderem:
- Neben CSS-Regeln auch für Stylesheets und CSS-Quellen. Über solche Links wird der Bereich Quellen geöffnet. Wenn das Stylesheet minimiert ist, lesen Sie den Abschnitt Minimierte Datei lesbar machen.
- In den Abschnitten Übernommen von… für übergeordnete Elemente.
- In
var()-Aufrufen zu Deklarationen von benutzerdefinierten Eigenschaften. - In
animation-Kurzschreibweisen auf@keyframes. - Weitere Informationen-Links in Dokumentations-Kurzinfos.
- Und mehr
Hier sind einige davon:
Links können unterschiedlich formatiert sein. Wenn Sie sich nicht sicher sind, ob etwas ein Link ist, klicken Sie darauf, um es herauszufinden.
Kurzinfos mit CSS-Dokumentation, Spezifität und benutzerdefinierten Eigenschaftswerten ansehen
Wenn Sie den Mauszeiger auf bestimmte Elemente bewegen, werden unter Elemente > Stile Tooltips mit nützlichen Informationen angezeigt.
CSS-Dokumentation ansehen
Wenn Sie eine Kurzinfo mit einer kurzen CSS-Beschreibung aufrufen möchten, bewegen Sie den Mauszeiger im Tab Styles auf den Attributnamen.
Klicken Sie auf Weitere Informationen, um eine MDN-CSS-Referenz zu dieser Eigenschaft aufzurufen.
Wenn Sie die Kurzinfos deaktivieren möchten, setzen Sie ein Häkchen bei 
Nicht anzeigen.
Wenn Sie sie wieder aktivieren möchten, setzen Sie ein Häkchen bei 
Einstellungen > Einstellungen > Elemente > 
CSS-Dokumentation als Kurzinfo anzeigen.
Spezifität von Selektoren ansehen
Bewegen Sie den Mauszeiger auf einen Selektor, um eine Kurzinfo mit seinem Spezifitätsgewicht aufzurufen.
Werte benutzerdefinierter Eigenschaften ansehen
Bewegen Sie den Mauszeiger auf ein --custom-property, um den zugehörigen Wert in einer Kurzinfo zu sehen.
Ungültiges, überschriebenes, inaktives und anderes CSS ansehen
Auf dem Tab Stile werden viele Arten von CSS-Problemen erkannt und auf unterschiedliche Weise hervorgehoben.
Nur das auf ein Element angewendete CSS ansehen
Auf dem Tab Stile sehen Sie alle Regeln, die für ein Element gelten, einschließlich überschriebener Deklarationen. Wenn Sie sich nicht für überschriebene Deklarationen interessieren, können Sie auf dem Tab Berechnet nur das CSS ansehen, das tatsächlich auf ein Element angewendet wird.
- Wählen Sie ein Element aus.
- Rufen Sie im Bereich Elemente den Tab Berechnet auf.
Klicken Sie das Kästchen Alle anzeigen an, um alle Eigenschaften zu sehen.
CSS-Eigenschaften in alphabetischer Reihenfolge ansehen
Verwenden Sie den Tab Berechnet. Weitere Informationen finden Sie unter Nur das CSS ansehen, das tatsächlich auf ein Element angewendet wird.