Firebug

Advertencia:
Esta sección se mantiene como referencia pero su contenido puede ya no ser del todo útil ya que la extensión Firebug ya no se encuentra en desarrollo.

Firebug es una extensión de Firefox creada y diseñada especialmente para desarrolladores y programadores web. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea e inline. - Wikipedia

Existe una edición de Firefox, conocida como Firefox Developer, con la cual tienes acceso a las herramientas y a las caracteristicas de la plataforma al menos 12 semanas antes de que lleguen a liberarse en la rama principal de Firefox. Otro plugin útil para Firefox Developer es DevPrefs.

A partir de la versión 49 de Firefox la extensión Firebug se integra a Firefox Developer Tools, quedando abandonada por sus desarrolladores. Para más información: Unifying Firebug & Firefox DevTools , Firebug y Firefox Developer Tools

Uso de Firebug

  1. Crea el directorio /home/alumno/www/firebug01 y en él el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8">
         <title>firebug01</title>
       </head>
       <body>
         <h1>¡Hola mundo!</h1>
       </body>
     </html>
    
  2. Inicia el servidor web thttpd en el anterior directorio:

     [slacker@servidor ~]$ cd /home/alumno/www/firebug
     [slacker@servidor ~]$ thttpd -D -p 8080 -l -
    
  3. Accede con Firefox a http://127.0.0.1:8080

  4. Activa a Firebug apretando la tecla [F12] y dirígete a la pestaña Consola

    Con la pestaña Consola podrás interactuar con el interprete de Javascript.

    NOTA: da clic sobre Enable para activar la Consola de ser necesario.

  5. Nota que en la Consola solo puedes ingresar código de Javascript en una sola línea, para poder escribir más líneas de código, usa el botón de color rojo que se encuentra en la parte inferior derecha de Firebug, con una flecha hacía arriba.

    Para ejecutar tu código, simplemente da clic en el botón Run/Ejecutar en la parte superior de Firebug o bien con el juego de teclas [Ctrl] + [Enter].

    Puedes escribir varías líneas de código para un programa en particular y posteriormente guardar el código en un archivo con extensión js

    Importante: una sesión de Firebug está asociada a una ventana o pestaña de Firefox, de tal forma que cada Consola corresponde de igual forma a una ventana o pestaña.

Una captura de pantalla de Firefox Developer con Firebug:

images/06.png

Una captura de pantalla de Firefox Developer con Firebug integrado en Firefox Developer Tools:

images/07.png