
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.
Aunque solo hago referencia a las seis que en mi opinión reúnen la mayor cantidad de caracterÃsticas, existe una gran cantidad de extensiones que podemos combinar para hacer mucho más fácil y rápido nuestro trabajo ¿conoces alguna otra?









Lo intenté varias veces, pero chrome no me parece cómodo para desarrollar.. Prefiero Firefox..
si yo tambien te comprendo hace poco me aventure pero es un poco engoroso. espero que esto no trae comentarios absurdos.
Mi favorita es Firebug. Hice un pequeño tutorial de uso, por si os interesa: http://felinfo.blogspot.com/2012/02/que-estilo-css-esta-afectando-una.html . Yo también prefiero Firefox para desarrollar.
A mi me paso al contrario.
También a mi, en Firefox hay que instalar cosas para desarrollar o hacerse pedazos con lo que trae, en cambio Chrome viene listo para trabajar.
No entiendo por que instalar Firebug en vez de usar la herramienta nativa (Developer Tools) que en lo personal es superior a Firebug, además viene dentro del navegador.
En parte estoy de acuerdo contigo, pero pienso que firebug te deja seleccionar más fácil partes de código que el Developer, pero igual los dos son muy buenos….
Saludos!
COMODO Dragon, versión mejorada de Chrome, mucho más estable y segura. No comparte datos con Google como lo hace Chrome. Saludos