Analyseer elke website codes met CSS Dig Chrome Extension

Er is veel waarmee je kunt doen Chrome DevTools van het bewerken van live websites tot het bestuderen van gedetailleerde HTTP-verzoeken. Maar de mogelijkheid om CSS-patronen te analyseren wordt niet in de console gebakken.

Met CSS Dig, je kunt alles analyseren CSS selectors, specificiteit, en unieke eigenschappen van elke webpagina rechtstreeks van Chrome. Deze extensie is volledig gratis en biedt veel kracht aan ontwikkelaars van de frontend.

Terwijl u een stylesheet inspecteert, krijgt u veel gegevens van het CSS Dig-paneel. Het kan het je laten zien individuele selectors, inclusief duplicaten en onnodige specificiteitsniveaus.

Om te beginnen, eenvoudig installeer de plug-in en open het consolevenster. U zult vinden twee tabbladen in het CSS Dig-venster: eigenschappen en selectors.

U kunt door resultaten bladeren georganiseerd door eigenschappen (kleur, rand, opvulling) of door selectors (klassen, ID's). Ik vind het eigenschappenvenster het meest waardevol, omdat je dan kunt bestuderen welke lettertypen en kleuren je gebruikt.

Deze tool werkt over het algemeen voor elke website, dus het is ook handig voor reverse engineering iemands ontwerp. U kunt de CSS rechtstreeks vanuit dit venster kopiëren en plakken en opnieuw gebruiken in uw eigen projecten.

Waarschijnlijk de meest voorkomende use case voor CSS Dig is om duidelijke dubbele kleuren vanuit je kleurenpalet. Hoeveel unieke tinten groen heb je echt nodig? Of, hoeveel verschillende schreefloze lettertypen zijn nodig voor één pagina?

CSS Dig is ongelooflijk eenvoudig, dus verwacht niet tientallen functies zoals met DevTools. In plaats daarvan is deze plugin eerder gericht op ontwikkelaars van front-end auditing sites voor repeat selectors of duplicate properties.

De broncode van de plug-in is gratis beschikbaar op GitHub waar je ook alle laatste updates.