Ausführlicher CSS-Inspector auf jeder Site mit CSSPeeper für Chrome

Das reguläre Chrome DevTools-Panel ist verrückt mächtig. Jeder kann tief in jede Seite eintauchen, um bei Bedarf das Layout, CSS und sogar HTTP-Header einer Site zu untersuchen.

Mit dem CSS-Inspector von DevTools können Sie viel erreichen. Aber es gibt kein klares GUI-Panel und das würde jeder Entwickler lieben.

Schauen Sie sich CSSPeeper an, eine kostenlose Chrome-Erweiterung, die diesen GUI-Inspector Ihrem Browser hinzufügt. Sie können die CSS-Eigenschaften aller Elemente auf einer beliebigen Seite untersuchen, obwohl sie derzeit nur für Chrome entwickelt wurde.

Einmal installiert hast du einfach Besuchen Sie eine Webseite und klicken Sie auf die Hauptschaltfläche der Erweiterung in der Chrome-Add-On-Leiste. Oben auf der Webseite wird ein neues Inspektorfenster mit Details zu jedem Hauptelement angezeigt.

Beim Durchsuchen der Site können Sie auf jedes Element klicken, das Sie mit einer gepunkteten Kontur sehen. Dies kann Schaltflächen, Seitenabschnitte, Überschriften und Navigationselemente beinhalten.

Von dort erhalten Sie einen ganzen Inspektor mit Details zu Typografie, Farbauswahl und Schriftstilen. Es ist ein guter Weg zu Stile direkt von einer Webseite ziehen ohne selbst in den CSS-Code zu graben.

CSSPeeper lässt Sie sogar zu Wählen Sie verwandte Farben mit einer integrierten Farbauswahl aus und Farbschema-Generator. Sie können Bilder von Seiten exportieren, Ihre eigenen Farbschemata erstellen und Wenden Sie diese in Ihre eigenen Modelle an mit Photoshop oder Sketch.

Ich hauptsächlich Empfehlen Sie diese Erweiterung für Designer Anstelle von Entwicklern ist dies ein viel benutzerfreundlicheres Plugin, das unformatiertes CSS verwendet und den Code in einfach zu lesende Datenblöcke umwandelt.

Dieses Plugin kann aber auch Entwicklern helfen! Es ist wirklich ein leistungsstarkes Tool zur Überprüfung von Websites für alle Arten von CSS.

Werfen Sie einen Blick auf die CSSPeeper-Homepage, um mehr über seine Möglichkeiten zu erfahren. Die Hauptseite enthält auch einen Link zum Chrome-Store, sodass Sie die Erweiterung kostenlos installieren und für einen Testlauf herausnehmen können.