Depurar código JavaScript paso a paso con Firebug

Uno de los dolores de cabeza cuando se programa  es la posibilidad de que se cometan errores, los cuales nos producirán resultados no deseados, por lo tanto un seguimiento paso a paso es necesario para comprobar si el código está bien estructurado.  La buena noticia es que contamos con Firebug.

Para este tutorial elaboré un código sencillo que se ejecutará tan pronto cargue la página:

Procedimiento

Una vez que esté instalada la extensión Firebug abrimos el archivo que queremos depurar en el navegador, hacemos clic en el icono que se encuentra en la parte superior derecha o presionamos la tecla F12  e inmediatamente en la parte inferior se visualiza el panel del programa:

Debido a que hasta ahora se ejecuta Firebug, en el panel no aparece el script como lo pueden apreciar en la imagen anterior, así que presionamos F5 para que vuelva a cargar el código y automáticamente podremos visualizar en la parte inferior izquierda las líneas del script.

Ahora el objetivo es que no se ejecute el código JavaScript sino que se detenga la ejecución en alguna línea y poder comenzar la revisión paso a paso, así que debemos ponemos un punto de interrupción de la siguiente manera:

  • Ubicamos el puntero del mouse en la parte izquierda de la línea a partir de la cual deseamos analizar el programa (para este ejemplo la 9) y hacemos clic, tras lo cual observaremos un punto de color vinotinto indicando que ya está establecido un punto de interrupción:

Para depurar el programa presionamos nuevamente la tecla F5 e inmediatamente se detiene la ejecución del código en la línea 9.  Si se fijan, sobre el punto de interrupción en el panel izquierdo aparece un triángulo amarillo, además de un fondo en toda la línea indicando que esa es la próxima instrucción que se va a ejecutar; en la parte derecha podemos notar que aparecen las tres variables declaradas, que por el momento no tienen valor alguno.

Vamos ahora a revisar el código paso a paso presionando la tecla F11.  Cada vez que se presiona esta tecla notarán que se resalta la siguiente instrucción que se  ejecutar.

La imagen que verán a continuación corresponde a la captura de pantalla del momento en que presione F11 varias veces hasta pasar por el segundo ciclo del for y se van a fijar en tres puntos:

  1. Estoy haciendo un seguimiento al valor que poseen las variables, lo cual es útil sobre todo cuando aparecen valores que no coinciden con nuestras expectativas.
  2. la sentencia “document.write(….)”  se ha ejecutado solamente una vez y por eso aparece una línea impresa.
  3. la próxima instrucción a ejecutarse es la línea no 13, así que si se presiona f11 aparecería en el documento: 5*2=10 que son los valores que poseen las variables concatenadas con los carcteres entre comillas indicados en esta línea.

Notas Finales

  • Pueden colocar tantos puntos de interrupción como deseen y si desean quitar alguno simplemente hagan un clic nuevamente sobre el punto violeta.
  • Cuando terminen de trabajar con firebug lo pueden cerrar con el botón que aparece en la parte derecha del panel o presionando la tecla f12.
  • Si quieren ver la lista de puntos de interrupción que uds establecieron pueden hacer clic en el panel derecho de firebug en el botón puntos de ruptura.
  • Si el programa es muy largo y ya notaron que esa parte que están revisando esta bien, además desean continuar con la ejecución del script, pueden presionar la tecla f8 y el programa continuará la ejecución hasta terminar o se detiene en el próximo punto de interrupción.
  • A medida que trabajen con firebug notarán que es posible editar el código desde este panel y probar los resultados, lo cual es bueno, lo malo es que no los guardan en el archivo original.
Espero que este tutorial sea de utilidad.  =)
Anuncios

2 comentarios

  1. Excelente tu tutorial. Tenia tiempo buscando una manera de ver la ejecución de javascript paso a paso.
    Gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: