Firefox Developer Edition es una nueva versión del popular navegador de Mozilla, enfocado a los desarrolladores web.

En los últimos años los navegadores más populares han incorporado herramientas para poder ver y editar el código fuente de las páginas web. Este tipo de herramientas son muy útiles para los desarrolladores web, ya que permiten localizar los fallos, y editar la página web “en vivo”, y por tanto ver los resultados de los cambios aplicados de forma inmediata.

Firefox Developer Edition es un navegador normal, es decir, podremos navegar de forma habitual por Internet, pero cuenta con la peculiaridad de que incluye multitud de herramientas que facilitan la labor de los desarrolladores web. Algunas de estas herramientas son:

• Valence : esta herramienta permite hacer debug de distintos navegadores en diferentes dispositivos. Por ejemplo, se puede hacer debug de una web en un Safari que corre bajo iOS, o en un Chrome que corre bajo Android. Esto permite que conectemos el dispositivo móvil al ordenador, y hacer los cambios de código mediante Firefox. Estos cambios se reflejarán en los dispositivos móviles conectados. Esta herramienta está en su fase de pruebas, por lo que no se recomienda para trabajar con ella de forma consistente.
• Vista de diseño responsivo : gracias a esta vista no será necesario instalar ningún plugin para comprobar como se ve la página en ciertas resoluciones. De esta forma podemos ver si el diseño responsivo se adapta perfectamente al máximo número de resoluciones posibles.
• Inspector de página : este panel muestra información sobre los elementos que componen la página web. Podremos observar y modificar el código HTML y CSS en vivo. Por ejemplo, si seleccionamos una clase CSS, veremos remarcados en la web, todos los elementos que hacen uso de esa clase CSS. Lo mismo sucede con los elementos HTML, al abrir el panel de “Inspector de página” y situar el cursor encima de un elemento HTML, veremos resaltado ese elemento en el diseño de la página.
• Consola Web : este panel muestra los mensajes de error y advertencia que genera la página web que estamos visitando, y los organiza en categorías, de tal forma que podremos ver los errores relativos a las CSS, Javascript, Red, etc. También podemos interactuar con los elementos de la web utilizando comandos Javascript en la consola. Podremos llamar al método de un objeto, o utilizar jQuery para listar una serie de elementos. Cualquier cosa que sepamos hacer en Javascript, la podremos realizar directamente desde la “Consola Web”.
• Monitor de Red : aquí se pueden observar todas las peticiones que realiza una página web, y explorar las cabeceras de las mismas. Esta vista es muy útil para saber exactamente cuantos elementos externos está cargando una web, y si es necesario reducir el número de elementos. Se puede filtrar las peticiones por tipo: HTML, CSS, JS, Imagen, Fuentes, Multimedia y otros.

Estas son solo algunas de las características que presenta esta nueva versión del navegador Firefox. Seguro que muchos desarrolladores web estarán contentos con esta versión, y no tardarán en hacer de este Firefox Developer Edition su navegador por defecto.