Compartir
Publicidad
CSS Peeper es una extensión que muestra la fuente, tamaño, código de color y demás datos de los elementos visuales de una web
Herramientas

CSS Peeper es una extensión que muestra la fuente, tamaño, código de color y demás datos de los elementos visuales de una web

Publicidad
Publicidad

Las páginas web se componen de miles de elementos, algunos de ellos más visibles que otros. En concreto, las tipografías de los textos, los colores que se escogen para las mismas, y el contenido multimedia, son lo que perciben todos los usuarios de un simple vistazo.

Para todos aquellos que quieran conocer en profundidad estos tres elementos, traemos una herramienta disponible para Google Chrome y aquellos navegadores que soporten sus extensiones. Su nombre es CSS Peeper, y nos permite inspeccionar de una forma bastante visual los elementos de una página web.

Una de las mejores formas de inspeccionar elementos visuales en una página web

CSS Viewer

Esta extensión se define como un "visor CSS inteligente", que nos permite, como su propio nombre indica, acceder a los códigos de estos elementos de las web, de un modo bsatante visual. No viene de más recordar que CSS es un lenguaje que se utiliza para diseñar los distintos estilos de los elementos que vemos en las páginas web. Al instalar la extensión y abrirla, veremos tres apartados principales, general, colors, y assets.

Botones CSS Viewer

El primero de estos apartados (general) es el que se nos abre al iniciar la extensión, y nos permite conocer las fuentes que está utilizando la página web, así como cierta información (peso total y tiempo de carga) sobre los propios elementos CSS que las componen.

CSS Viewer En este apartado, vemos la información referente a las tipografías usadas en el website.

El segundo nos muestra de una forma muy visual, cada uno de los códigos de color que componen la página. Si posamos el ratón por encima de alguno de estos códigos, veremos la opción de copiar al portapapeles, para poder introducir este código en cualquier otra web o programa.

CSS Viewer colors En el segundo apartado, tenemos acceso a los códigos de color de la página, y a un botón para llevarlo al portapapeles.

En tercer lugar, encontramos un apartado en el que podemos encontrar todos los elementos de imagen de la página. La cosa no se queda aquí, ya que también podemos descargalos con tan solo pulsar sobre ellos. La herramienta detecta si están en formato JPEG o PNG, y los descarga respetando dicho formato original.

Si descargas varios archivos, o quieres descargarlos todos de golpe, la extensión los comprimirá en un archivo .zip para que el proceso sea más rápido y cómodo.

CSS imágenes En el tercer apartado podremos descargar el contenido multimedia de la página web.

La cosa no acaba aquí

Por si parecían pocas funciones, CSS Peeper incluye un inspector manual de elementos, a través del cuál pulsando sobre los distintos elementos visuales de la página, obtendremos información sobre su tamaño, fuente, alineación, código de color, espaciado de letra...

CSS Viewer El selector de CSS Peeper nos permite acceder a la información de cada uno de los elementos visuales de la página.

Como habrás visto a lo largo de las imágenes, una de las principales bondades de CSS Peeper es el mimo que tiene su interfaz, bien diseñada, con una línea moderna. Del mismo modo, la facilidad de uso de la herramienta es un punto a tener en cuenta, ya que realiza los procesos de forma automática, nos deja copiar y descargar con tan solo un click, y nos muestra la información ordenada y de forma clara.

La extensión está disponible para Google Chrome y todos aquellos navegadores que soporten sus extensiones, de forma gratuita. Su peso es de 280KB, y según la tienda de Google cuenta con más de 100.000 usuarios y una puntuación de 4.7 estrellas sobre 5.

Descargar | CSS Peeper

Temas
Publicidad
Publicidad
Publicidad
Inicio