Cuando trabajamos en desarrollo y diseño web, por lo general utilizamos varios navegadores para comprobar que los sitios y aplicaciones que desarrollamos sean totalmente compatibles entre ellos, tanto en apariencia como en funcionalidad.
La mayoría de navegadores actuales viene con herramientas incorporadas que nos permiten realizar análisis de diferentes aspectos, hacer seguimiento de eventos mientras navegamos en un sitio y detectar posibles errores con mucha precisión para darles solución oportuna, como es el caso de Developer tools en Google Chrome, Web Console en Firefox y Opera Dragonfly en el navegador Opera. Sin embargo, gracias a las extensiones, tenemos la posibilidad de ampliar las funciones de estas poderosas herramientas e incluso agregar algunas otras de las que no disponen.
También es cierto que todos tenemos un navegador favorito para trabajar, en mi caso es Google Chrome, por su velocidad y por hacer un uso más eficiente de memoria que sus competidores, pero sobre todo por su rápida adopción por parte de los usuarios.
Aunque solo hablaré de extensiones para Chrome, muchas de estas se encuentran disponibles para otros navegadores, por lo que también puedes disfrutarlas si tu navegador por defecto es otro.
- Web Developer: Es una extensión escrita originalmente para Firefox, es quizá una de las más populares entre los desarrolladores y también cuenta con su versión para Google Chrome. Web Developer añade un icono en la parte superior de la interfaz del navegador, que a su vez nos deja ver un menú para manipular múltiples opciones en el sitio que tengamos abierto. Alterar el aspecto de la página, modificar el funcionamiento de formularios, extraer imágenes del sitio, validar código HTML y CSS, son solo algunas de las cerca de 100 opciones que podemos encontrar. Es una extensión bastante completa e indispensable.
- PHP Code Editor: Excelente herramienta para crear y editar código PHP. Este editor se integra dentro de la interfaz de Chrome y entre sus características ofrece: validación y autocompletación de código, resaltado de palabras reservadas del lenguaje, acceso FTP, soporte para múltiples documentos a través de pestañas, entre otras.
- Validity: Esta extensión ofrece una manera simple de validar el código HTML de nuestras páginas. Al instalarla, veremos un nuevo ícono en la barra de direcciones del navegador, basta con hacer clic en él para que comience el proceso de validación, al finalizar, podemos ver en forma de tooltip la cantidad de errores encontrados y para un reporte completo, abrimos la consola de errores que viene integrada en el navegador. Por defecto trabaja con el validador de la W3C, pero puedes cambiarlo en la configuración.
- Window Resizer: De gran utilidad para diseñadores y desarrolladores. Con Window Resizer podemos simular múltiples resoluciones de pantalla sin abandonar el navegador, de esta manera podemos hacernos una idea de cómo se verá nuestro sitio web en pantallas de diferentes tamaños. Viene con las resoluciones más usadas por defecto, pero ofrece la posibilidad de agregar nuevas de acuerdo a nuestras necesidades.
- Pendule: Muy similar a la extensión Web Developer, pero a diferencia de esta, Pendule permite crear atajos de teclado para las funciones principales y modificar las fuentes que usaremos para validar el código de nuestros sitios, además consume menos memoria.
- Firebug Lite for Google Chrome: Es mi extensión favorita, su gran utilidad radica en la posibilidad que nos ofrece de inspeccionar y editar porciones específicas del código que conforma una página. Al realizar edición de código, podemos ver los cambios automáticamente en el sitio, así podemos efectuar varios ajustes antes de implementarlos completamente. A través del icono que se instala en la parte superior derecha de la pantalla, podemos desactivarla fácilmente cuando no estamos trabajando y así evitar que consuma recursos extra.