Analizar los códigos de cualquier sitio web con CSS Dig Chrome Extension

Hay mucho que puedes hacer con Chrome DevTools desde la edición de sitios web en vivo hasta el estudio de solicitudes HTTP detalladas. Pero el Capacidad para analizar patrones CSS. no está cocido en la consola.

Con CSS Dig, puedes analizar todo Selectores de CSS, especificidad, y propiedades únicas de cualquier página web directamente desde Chrome. Esta extensión es totalmente gratuita y ofrece mucha potencia a los desarrolladores frontend..

Al inspeccionar una hoja de estilo, obtendrá una gran cantidad de datos del panel CSS Dig. Te puede mostrar selectores individuales, incluso duplicados y niveles de especificidad innecesarios.

Para empezar, simplemente instalar el complemento y abre la ventana de la consola. Encontrarás dos pestañas en la ventana CSS Dig: Propiedades y Selectores.

Puedes buscar resultados organizado por propiedades (color, borde, relleno), o por selectores (clases, identificaciones). Considero que la ventana Propiedades es la más valiosa, ya que le permite estudiar qué fuentes y colores está usando.

Esta herramienta funciona en todos los ámbitos para cualquier sitio web, por lo que también es útil para Ingeniería inversa El diseño de cualquiera. Puede copiar / pegar el CSS directamente desde esta ventana y reutilizarlo en sus propios proyectos..

Probablemente el caso de uso más común para CSS Dig es colores claros y duplicados de su paleta de colores. ¿Cuántos tonos de verde únicos realmente necesitas? O, ¿cuántas fuentes diferentes de sans-serif son necesarias para una página??

CSS Dig es increíblemente simple, así que no esperes docenas de características como con DevTools. En su lugar, este plugin es bastante orientado a los desarrolladores frontend Sitios de auditoría para selectores de repetición o propiedades duplicadas.

los código fuente El complemento está disponible de forma gratuita en GitHub, donde también encontrará todos los últimas actualizaciones.