Inspector CSS detallado en cada sitio con CSSPeeper para Chrome

El panel de Chrome DevTools normal es una locura poderosa. Permite a cualquier persona profundizar en cualquier página para estudiar el diseño de un sitio, CSS e incluso los encabezados HTTP si es necesario..

Puedes hacer mucho con el inspector de CSS de DevTools. Pero no tiene un panel GUI claro y eso es algo que a todos los desarrolladores les encantaría.

Echa un vistazo a CSSPeeper, una extensión gratuita de Chrome que agrega este inspector de GUI a tu navegador. Te permite estudiar las propiedades CSS de cualquier elemento en cualquier página, aunque solo está construido para Chrome en este momento.

Una vez instalado simplemente Visite una página web y haga clic en el botón principal de la extensión en la barra de complementos de Chrome. Aparece una nueva ventana de inspección en la parte superior de la página web con detalles sobre cada elemento principal.

Mientras navega por el sitio, puede hacer clic en cualquier elemento que vea con un contorno de puntos. Esto puede incluir botones, secciones de página, encabezados, elementos de navegación, lo que quieras..

Desde allí obtendrá un inspector completo con detalles sobre la tipografía, las opciones de color y los estilos de fuente. Es una gran manera de extraer estilos directamente desde una página web sin cavar en el código CSS a ti mismo.

CSSPeeper incluso te permite Elija colores relacionados con un selector de color incorporado y generador de esquema de color. Puede exportar imágenes desde páginas, crear sus propios esquemas de color y Aplica esto en tus propias maquetas. con Photoshop o Sketch.

Yo principalmente Recomienda esta extensión para diseñadores. en lugar de desarrolladores, ya que es un complemento mucho más fácil de usar para el diseñador que extrae CSS en bruto y transforma el código en fragmentos de datos fáciles de leer.

¡Pero este plugin también puede ayudar a los desarrolladores también! Es realmente un Potente herramienta de inspección de sitios para todos los tipos de CSS..

Eche un vistazo a la página de inicio de CSSPeeper para obtener más información sobre lo que puede hacer. La página principal también incluye un enlace a la tienda Chrome para que pueda instalar la extensión de forma gratuita y sacarla para una prueba..