Analizza i codici di qualsiasi sito Web con CSS Dig Chrome Extension

C'è molto che puoi fare con Chrome DevTools dalla modifica di siti Web in tempo reale allo studio di richieste HTTP dettagliate. Ma il capacità di analizzare i modelli CSS non è cotto nella console.

Con CSS Dig, puoi analizzare tutto Selettori CSS, specificità, e proprietà uniche di qualsiasi pagina Web direttamente da Chrome. Questa estensione è totalmente gratuita e offre molto potere agli sviluppatori di frontend.

Mentre controlli un foglio di stile otterrai molti dati dal pannello CSS Dig. Può mostrarti selettori individuali, Compreso duplicati e livelli di specificità inutili.

Per iniziare, semplicemente installa il plugin e apri la finestra della console. Lo troverai due schede nella finestra CSS Dig: Proprietà e I selettori.

Puoi sfogliare i risultati organizzato per proprietà (colore, bordo, riempimento), o dai selezionatori (classi, ID). Trovo che la finestra Proprietà sia la più preziosa, in quanto ti consente di studiare quali tipi di carattere e colori stai utilizzando.

Questo strumento funziona su tutta la linea per qualsiasi sito web, quindi è anche utile per reverse-engineering il design di chiunque. Puoi copiare / incollare il CSS direttamente da questa finestra e riutilizzarlo sui tuoi progetti.

Probabilmente il caso d'uso più comune per CSS Dig è cancella i colori duplicati dalla tua tavolozza di colori. Quante sfumature di verde uniche hai veramente bisogno? Oppure, quanti tipi di caratteri sans-serif sono necessari per una pagina?

CSS Dig è incredibilmente semplice, quindi non aspettarti dozzine di funzionalità come con DevTools. Invece, questo plugin è piuttosto orientato verso gli sviluppatori di frontend siti di controllo per selettori ripetuti o proprietà duplicate.

Il codice sorgente del plugin è disponibile gratuitamente su GitHub dove troverai anche tutto il ultimi aggiornamenti.