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
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.
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.
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.
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.
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...
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
