Neu in Chrome: CSS Übersicht

Hier ist eine schicke neue experimentelle Funktion in Chrome! Jetzt können wir uns einen Überblick über das auf einer Website verwendete CSS verschaffen, von der Anzahl der Farben bis hin zur Anzahl ungenutzter Deklarationen... bis hin zur Gesamtzahl der definierten Media Queries.

Nochmals, dies ist eine experimentelle Funktion. Das bedeutet nicht nur, dass sie noch in Arbeit ist, sondern auch, dass Sie sie aktivieren müssen, um sie in DevTools nutzen zu können.

• Öffnen Sie die DevTools (Command+Option+I unter Mac; Control+Shift+I unter Windows)
• Gehen Sie zu den DevTools-Einstellungen (? oder Function+F1 unter Mac; ? oder F1 unter Windows)
• Klicken Sie auf den Abschnitt Experimente
• Aktivieren Sie die Option CSS-Übersicht

Und, oh schau mal! Wir bekommen einen neuen Tab „CSS-Übersicht“ im Menüband der DevTools, wenn die Einstellungen geschlossen sind. Stellen Sie sicher, dass er nicht im Überlaufmenü versteckt ist, wenn Sie ihn nicht sehen.

Beachten Sie, dass der Bericht in mehrere Abschnitte unterteilt ist, darunter Farben, Schriftinformationen, ungenutzte Deklarationen und Media Queries. Das sind *eine Menge* Informationen auf kleinem Raum direkt an unseren Fingerspitzen.

Das ist aber ziemlich raffiniert, oder? Ich liebe es, dass Tools wie dieses beginnen, in den Browser zu gelangen. Denken Sie darüber nach, wie uns das nicht nur als Front-End-Entwickler helfen kann, sondern auch bei der Zusammenarbeit mit Designern. Ein Designer kann dies öffnen und unsere Arbeit überprüfen, um sicherzustellen, dass alles von der Farbpalette bis zum Font-Stack intakt ist.