Ispettore CSS dettagliato su ogni sito con CSSPeeper per Chrome

Il normale pannello Chrome DevTools è pazzesco. Permette a chiunque di approfondire qualsiasi pagina per studiare il layout di un sito, i CSS e persino le intestazioni HTTP, se necessario.

Puoi fare molto con l'ispettore CSS DevTools. Ma non ha un chiaro pannello GUI e questa è una cosa che ogni sviluppatore vorrebbe.

Dai un'occhiata a CSSPeeper, un'estensione gratuita di Chrome che aggiunge questa finestra di ispezione della GUI al tuo browser. Ti consente di studiare le proprietà CSS di qualsiasi elemento in qualsiasi pagina, anche se al momento è solo costruito per Chrome.

Una volta installato, solo visita una pagina Web e fai clic sul pulsante principale dell'estensione nella barra dei componenti aggiuntivi di Chrome. Una nuova finestra di ispezione appare sulla parte superiore della pagina Web con i dettagli su ciascun elemento principale.

Mentre navighi nel sito, puoi fare clic su qualsiasi elemento che vedi con un contorno tratteggiato. Questo può includere pulsanti, sezioni di pagina, intestazioni, voci di navigazione, il tuo nome.

Da lì avrai un intero ispettore con dettagli sulla tipografia, le scelte di colore e gli stili dei caratteri. È un ottimo modo per estrae gli stili direttamente da una pagina web senza scavare nel codice CSS te stesso.

CSSPeeper ti lascia anche scegli i colori correlati con un selettore colori incorporato e generatore di schemi di colori. Puoi esportare immagini da pagine, creare le tue combinazioni di colori e applica questi nei tuoi prototipi con Photoshop o Sketch.

Io principalmente consiglia questa estensione per i designer invece di sviluppatori in quanto è un plug-in molto più progettista che estrae i CSS grezzi e trasforma il codice in blocchi di dati di facile lettura.

Ma questo plugin può anche aiutare gli sviluppatori! È davvero un potente strumento di ispezione del sito per tutti i tipi di CSS.

Dai un'occhiata alla homepage di CSSPeeper per saperne di più su cosa può fare. La pagina principale include anche un link allo store di Chrome in modo da poter installare l'estensione gratuitamente e portarla a termine per una corsa di prova.