Toda página web está compuesta de mucho código en HTML, CSS, PHP, Java, por mencionar solamente algunos de los más populares, aparte de lo anteriormente mencionado, también incluye tipografía para el texto, colores, archivos multimedia, estos últimos son los que logramos visualizar en primera instancia. Si te interesa saber de forma visual los elementos de una página web, CSS Peeper es para ti.

CSS Peeper es una extensión disponible para cualquier navegador basado en Chromium y se trata de una especie de visor CSS inteligente, esto nos permite acceder a los códigos de estos elementos de la web, de modo totalmente visual. Tras instalar la extension e iniciarla por primera vez, tendremos acceso a tres apartados: general, Colors y assets.

A continuación describiremos en que consiste cada a apartado:


General: Este apartado nos permite conocer la tipografía que se está empleando en la página web, adicionalmente, información como el peso y/o tamaño de la página y el tiempo de carga.


Colors: Con un aspecto muy visual y atractivo, recopila los colores empleados en el sitio web y los muestra en una paleta de colores con su respectivo código, al pasar el cursor sobre cada color, nos brinda la opción de copiar al portapapeles el código para posteriormente pegarlo en algún otro proyecto.


Assets: El funcionamiento es muy similar al apartado de color, pero este no trabaja con los colores, sino más bien con todo el contenido multimedia, siendo capaz de detectar si la imagen está en formato PNG o JPEG y nos permite descargar dicho contenido respetando el formato original. En caso de ser varios archivos o todos, automáticamente se comprimirán en un archivo .zip, con el fin de facilitar el proceso.

La extensión también 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...

Sin duda, CSS Peeper cuenta con un gran potencial, aparte de contar con un diseño muy minimalista y bien logrado, ofreciendo grandes herramientas que nos harán comprender todo el trabajo que hay detrás de un sitio web.

Enlace Web - CSS Peeper