Es otra extensión de Firefox diseñada para desarrolladores y diseñadores Web. integra funciones del JS-Console y Web Developer.

Alfunas de sus funciones son:

• Edición de HTML, CSS y JavaScript en tiempo real

Con Firebug se puede visualizar y editar el código fuente del HTML, CSS y JavaScript de una página Web en la pantalla del monitor, observando los cambios que hemos realizado de forma inmediata, pero temporal; es decir, los cambios que hemos hecho en el código de fuente son resaltados por Firebug y lo visualizamos en la página Web que estamos trabajando, pero solo veremos estos cambios hasta que actualicemos la página Web o salgamos de ella.

Por lo tanto al igual que Web Developer si queremos guardar los cambios –que hemos visualizado en la pantalla del monitor cuando trabajamos con este plugin- debemos ir al código de fuente real que está en el servidor. Además, la interfaz del Firebug es muy intuitiva

• Buscador Integrado

Facilita hallar los códigos de fuente con mayor rapidez y nos permite exportar los cambios fácilmente para aplicarlos en el código de fuente real. También, se puede filtrar la consola para que muestre sólo los errores que coinciden con el texto buscado.

• Red de vigilancia

Algunas páginas Web se demoran en cargar, el motivo puede ser, que colocó demasiado JavaScript, las imágenes de la página no han sido comprimidas, o problemas con el servidor o conexión. En caso de ser un problema de programación, la red de vigilancia le indica el peso y tiempo de carga de cada elemento, para que luego haga los cambios que desee. También puede visualizar el peso y tiempo de carga por tipo de elemento. Ej. Solo CSS o HTML.

• Exploración del DOM

El DOM define la estructura lógica de los objetos y sus funciones, y el modo en que accedemos y manipulamos cada objeto. Existen dos tipos de objetos y funciones, los que pertenecen al DOM estándar y los que son del código JavaScript y para saber cual es cual ésta función muestra qué archivos son DOM.

Si quiere editar los archivos solo se debe hacer doble clic en el espacio en blanco de la fila que se quiere modificar.

• depurador de JavaScript:

En la consola de Firebug usted puede visualizar si la página tiene errores, para ello aparecerá una aspa de color roja “X” en la parte inferior derecho del navegador. Para visualizar cuáles son los errores haga clic en el aspa roja.

Para solucionar el problema solo debe clicar vínculo, que tiene cada informe de error –está ubicado en el lado derecho y apunta al archivo y número de línea. Cuando haga clic lo llevará al depurador del JavaScript para que solucione el problema.

Semejanzas y diferencias del Firebug con la Web Developer

Tanto al Firebug como el Web Developer ayudan a desarrollar mejor los sitios Web. Cuándo emplear uno u otro depende mucho de si lo que queremos tiene que ver con el diseño o desarrollo del sitio Web. Si nuestro trabajo está más orientado al diseño de la página Web Developer es lo más recomendado porque permite trabajar más la maquetación y la semántica de la Web, así como los estilos.

Firebug, en cambio, está más orientado al desarrollo Web porque permite capturar y depurar errores en el instante y visualizarlos en la pantalla, aunque temporalmente, además permite saber la cantidad de transferencia y tiempo de carga de la Web.

La diferencia entre el JS-Console y la consola de Firebug, radica principalmente en que la consola de Firebug permite captar errores que solo son percibidos cuando la máquina se está descargando, y poder corregirlos en el acto.