Si estás desarrollando una web o querés saber cómo fue diseñada estas herramientas van a serte de mucha ayuda. Te dejaremos 2 inspectores visuales de CSS para que veas rápidamente los elementos que componen a cualquier sitio sin tener que usar la antigua consola de Chrome.

Con cualquiera de estos 2 inspectores visuales de CSS podrás saber cuál es su tipografía, los colores que se usaron. También podrás inspeccionar los elementos, exportar sus imágenes y mucho más.

Si querés saber cómo queda tu web en diferentes dispositivos no te pierdas nuestra nota sobre responsive webs aquí.

Conocé los 2 inspectores visuales de CSS recomendados:

Para ser honestos las 2 herramientas que vamos a presentarles son muy similares. La primera es más antigua, creada a principios de 2017 y cuenta con más de 100.000 instalaciones en google chrome. La segunda, es de mediados de 2019 y, quizás, a eso se deba nuestra predilección hoy en día.

CSS Peeper

Resultado para 2 inspectores visuales de CSS

En una vez abierta la extensión ( tenés que hacer click sobre el ícono con cualquier página activa) , te brindará toda la info del sitio: su título, tipografía principal y secundaria, lo que pesa el archivo CSS y lo que demora en cargar (dato importante para los celulares).

En otra pestaña te permite conocer toda la gama de colores en la que está compuesta la web. Podés seleccionarlos o copiarlos para tus propios códigos / diseños. Y en la 3 pestaña, encontrarás todas las fotos del sitio una debajo de la otra y podrás exportarlas fácilmente de a una por vez o todas juntas. (recordá atribuir al creador si vas a utilizarla, chequeá cuáles son los derechos de esas imágenes).

Visual Inspector 🔥

Como el ícono que pusimos detrás del nombre, Visual inspector es representa a la perfección. No solo cuenta con todas las características que mencionamos con CSS Inspector, sino que parece la consola de google pero diseñada de forma visual.

Vas a poder inspeccionar elementos, cambiar textos, colores, espacios, alineaciones, entre otras cosas. Pero lo mejor que tiene es que vas a poder copiar todos esos cambios que hiciste y pegarlos en tu propio documento 👏 .

Link del ícono de la imagen: aquí