Analysieren Sie die Codes jeder Website mit der CSS Dig Chrome-Erweiterung

Es gibt eine Menge, die Sie mit machen können Chrome DevTools von der Bearbeitung von Live-Websites bis hin zur Untersuchung detaillierter HTTP-Anforderungen. Aber die Fähigkeit zur Analyse von CSS-Mustern wird nicht in die Konsole gebacken.

Mit CSS Dig, Sie können alles analysieren CSS-Selektoren, Besonderheit, und Einzigartige Eigenschaften von jeder Webseite direkt aus Chrome. Diese Erweiterung ist völlig kostenlos und bietet Frontend-Entwicklern viel Leistung.

Beim Überprüfen eines Stylesheets erhalten Sie viele Daten aus dem CSS-Dig-Bedienfeld. Es kann dir zeigen individuelle Selektoren, einschließlich Duplikate und unnötige Spezifitätsstufen.

Einfach loslegen Installiere das Plugin und öffnen Sie das Konsolenfenster. Du wirst es finden zwei Registerkarten im CSS Dig-Fenster: Eigenschaften und Selektoren.

Sie können Ergebnisse durchsuchen geordnet nach Eigenschaften (Farbe, Rand, Auffüllung) oder durch Selektoren (Klassen, IDs). Ich finde das Eigenschaftenfenster am wertvollsten, da Sie damit die verwendeten Schriftarten und Farben untersuchen können.

Dieses Tool eignet sich für alle Websites und ist daher auch praktisch Reverse-Engineering jemandes Design. Sie können das CSS direkt aus diesem Fenster kopieren / einfügen und für Ihre eigenen Projekte wiederverwenden.

Der häufigste Anwendungsfall für CSS Dig ist zu klare doppelte Farben aus Ihrer Farbpalette. Wie viele einzigartige Grüntöne brauchen Sie wirklich? Oder wie viele verschiedene Serifenlos-Schriftarten für eine Seite erforderlich sind?

CSS Dig ist unglaublich einfach. Erwarten Sie nicht Dutzende von Funktionen wie bei DevTools. Stattdessen ist dieses Plugin eher ausgerichtet auf Frontend-Entwickler Prüfstellen für Wiederholungsselektoren oder doppelte Eigenschaften.

Das Quellcode Das Plugin ist kostenlos auf GitHub verfügbar. Dort finden Sie auch alle letzte Aktualisierung.