Repasamos varias extensiones de Google Chrome para desarrolladores y diseñadores que son muy útiles para depurar nuestros diseños y páginas web.

¡No te pierdas nuestro contenido!
17 de febrero de 2014, 23:32

Uno de las ventajas de usar navegadores como Google Chrome o Firefox es que, gracias a las extensiones, podemos personalizarlos por completo. Mediante el uso de complementos podemos transformar un navegador de "propósito general" en un entorno adaptado a nuestro trabajo o que nos haga navegar de manera mucho más cómoda. Casi sin darnos cuenta, el navegador se ha convertido en una de las aplicaciones clave para cualquier usuario, ya sea porque usemos aplicaciones web o trabajemos en el desarrollo de éstas.

Si trabajas en el ámbito del desarrollo de aplicaciones, el navegador también es una herramienta clave para la fase de depuración y verificación de nuestro proyecto; una vez que hemos desarrollado una web tenemos que probarla, comprobar que ésta funciona adecuadamente o que, a nivel de diseño, se corresponde con las pautas que habíamos marcado. Teniendo en cuenta todas estas tareas, puede ser interesante complementar las funcionalidades de nuestro navegador con algunas funcionalidades adicionales que nos faciliten nuestro trabajo, en este sentido, en la Chrome Web Store (que, por cierto, se ha convertido en la única fuente oficial de extensiones) podemos encontrar un buen número de extensiones de Google Chrome para desarrolladores y diseñadores que vale la pena conocer.

Con la idea de facilitar un poco el trabajo a aquéllos que se dediquen al mundo del diseño y el desarrollo web, vamos a repasar algunas extensiones para Google Chrome que, seguramente, te ayuden mucho en tu trabajo:

  • Drag Design es una curiosa extensión para Google Chrome que ofrece a los usuarios la posibilidad de alterar el diseño de una página web sin más que arrastrar elementos y moverlos de sitio. La idea es que podamos hacer pruebas sobre una web real y modificar el diseño sobre la marcha para ver qué tal queda.

  • CSS remove and combine es otra extensión orientada al mundo del diseño web; con este complemento podremos analizar el CSS de la web que estemos visitando, eliminar secciones concretas, combinarlas y confeccionar un CSS personalizado que podremos bajar para usarlo, por ejemplo, como base para otro proyecto.

  • Color Contrast Analyzer es una extensión muy interesante para todos los que trabajan en webs accesibles; con esta herramienta podremos realizar un análisis del contraste de colores que hemos usado siguiendo las pautas del WCAG 2.0 y ver si nuestra web es accesible para personas que sufran algún tipo de discapacidad visual.

  • Joomla Version Check es una curiosa extensión que nos indicará la versión del CMS Joomla que está usando la web que estemos visitando, eso sí, siempre y cuando esté basada en Joomla. Quizás, a simple vista, nos pueda parecer que la extensión aporta poca información pero conocer la versión de un CMS es importante para saber si está obsoleto o qué posibles vulnerabilidades presenta. De hecho, lo mejor que podemos hacer cuando trabajemos con un CMS es ocultar la versión y hacer que este dato nunca esté disponible para nuestros visitantes.

  • ColorPick Eyedropper es un complemento para Google Chrome con el que podremos inspeccionar la paleta de colores usada en una página web, podremos hacer clic sobre una zona coloreada y obtener el código hexadecimal que define el color y, por ejemplo, usarlo en otro diseño.

  • Responsive Web Design Tester es una extensión que, sin duda alguna, vale la pena instalar si trabajas en proyectos de desarrollo web. Gracias a esta extensión podremos probar una web y emular, desde Chrome, la pantalla de distintos dispositivos móviles para verificar que la página se adapta perfectamente a todo tipo de pantallas (siguiendo las pautas del diseño web adaptativo).

  • Otra extensión interesante para probar una web con distintos tamaños de pantalla es Browser Resize; gracias a esta extensión podremos configurar distintos dispositivos y probar, desde Chrome, cómo se visualiza una web desde un iPad o un iPhone.

  • JavaScript Errors Notifier es una buena extensión con la que podremos verificar si la página web que estamos visitando presenta errores de JavaScript. La extensión nos alertará nos ofrecerá un listado de fallos en el caso que estos se presenten.

  • PerfectPixel es una extensión que permite a los diseñadores superponer, sobre una web, una imagen con la que comparar si el resultado final de un trabajo cuadra "píxel a píxel" con el diseño del boceto. También puede ser interesante para probar modificaciones o cambios sobre un diseño ya realizado.

  • Designer Tools es una completa extensión para Google Chrome que nos ofrece un conjunto de herramientas orientadas a desarrolladores con las que realizar mediciones de píxeles o, por ejemplo, inspeccionar la paleta de colores de una web determinada.

  • Speed Tracer es una extensión fundamental que nos permitirá medir el rendimiento de una página web determinada para hacernos una idea del tiempo que tarda en cargar o si hay que optimizar aún algunos detalles para evitar que los usuarios se desesperen.

  • ruul es una extensión bastante interesante que nos puede ayudar a realizar tareas básicas, por ejemplo, a la hora de verificar el diseño y la maquetación de una web. Este complemento añade a Google Chrome una regla que nos permite realizar medidas en píxeles sobre una web determinada.