Usando el depurador de JavaScript Venkman

Uso básico

Llegados a este punto deberías saber como ejecutar Venkman, que debería tener un aspecto similar al de la captura de pantalla, y como configurarlo para ajustarlo a tus necesidades. Ahora, cierra Venkman. Utiliza Mozilla para abrir la página venkman_example_1.html. Esta es una serie de archivos HTML, que contienen pequeños scripts, que he escrito, para demostrar cada aspecto de Venkman. Cuando te lo diga, simplemente muevete al siguiente archivo (pulsando sobre el enlace proporcionado.)

Comprobando el código fuente

Una de las cosas básicas que puedes hacer con Venkman, es inspeccionar el código fuente cargado actualmente. Es importante tener en cuenta, que Venkman solo te permite ver el código fuente, y no editarlo, no es un editor.

En este momento, el panel llamado "Source code" (Código fuente) debería estar vacio, ya que no le has indicado a Venkman que quieres ver en el (si no se lo indicas, una vez que comiences a depurar, Venkman mostrará el código relevante por si mismo.) Vamos a ver el código fuente de un archivo HTML. Hay dos formas, de obtener el código. Primero, puedes ver el código de una página entera (el archivo venkman_example_1.html que te indiqué que cargaras anteriormente, en este caso), o puedes saltar directamente a la definición de una función.

Ver el código fuente es sencillo. Asegurate de que el panel Loaded Scripts (Scripts Cargados) esté activo. Debería tener un aspecto semejante al de la figura 9 (ignora el "XStringBundle", o cualquier otra cosa extraña que pueda aparecer en el diálogo. Son simplemente los trapos sucios de Mozilla.)

Figura 9. Loaded Scripts, donde todo el código fuente se puede acceder de forma sencilla en Venkman.

Ahora, simplemente haz doble click en el archivo HTML venkman_example_1, y aparecerá en el panel Source Code (si el código fuente no se ve bien, prueba a maximizar la ventana y a restaurarla después a su tamaño original). Debería tener un aspecto parecido a la figura 10.

Figura 10. Venkman es capaz de mostrar cualquier código cargado (pulsa para ver una versión no escalada).

Al hacer doble click sobre el nombre del archivo, también has expandido la rama (si esto no ocurre, simplemente pulsa sobre la cruz). Lo que podemos ver aquí (solo "test" en la figura 10), es una lista completa de las funciones JavaScript que contiene el archivo (mi pequeño archivo HTML solo tiene una función)

Hacemos doble click sobre el nombre de la función, y debería resaltar el código fuente de la función, como se ve en la figura 11.

Figura 11. Selecciona cualquier función, para saltar directamente a la definición de la función en Venkman, resaltada para que sea mas útil (pulsa para ver una versión no escalada).

Una cosa que no podemos ver ahora mismo, pero con la que te encontrarás dentro de poco, es que en la pestaña Loaded Scripts, no solo se muestran los archivos HTML, los archivos JavaScript que éste pueda tener enlazados también se mostrarán. Y estos funcionan de manera exactamente igual a los archivos HTML. Haz doble click sobre el nombre del archivo, para ver el código del archivo, expandirlo, y ver cualquier función que pueda estar presente en ese archivo.

Scripts Cargados

Acabas de utilizar el panel "Loaded Scripts", para ver el código fuente de un documento HTML. Cada tipo de archivo, tiene su icono propio, y si expandes el icono del archivo, verás mas sub iconos, representando a las funciones. Aquí tienes una lista completa de lo que significa cada icono.

Icono	Tipo
	JavaScript (.js)
	Hypertext Markup Language (.html, .htm)
	eXtensible Userinterface Language (.xul)
	eXtensible Markup Language (.xml)
	Todos los demás archivos
	Función JavaScript

Basicamente, estos son todos los archivos, que pueden contener JavaScript ejecutable en Mozilla. Debajo cada archivo cargado, verás las funciones definidas en ese archivo. Además, si te estas preguntando porqué algunos nombres de funciones tienen corchetes alrededor, esto es porque Venkman está adivinando sus nombres.

La Sesión Interactiva

Ahora, que has aprendido como ver archivos, es hora de aprender algo sobre la Sesión Interactiva. Una parte muy básica, pero muy útil de Venkman.

Observa el panel etiquetado como "Interactive Session". Si lees el aviso (que aparece cuando se inicia Venkman), dice que cualquier texto introducido precedido por / se leerá como un comando de Venkman, y cualquier otra cosa, se ejecutará como código JavaScript. Asi que vamos a probar esto. Escribe "1+1" (añade ; al final, si te apetece), en la caja de texto, y presiona enter:

Figura 12. La consola de Sesión Interactiva, después de leer "1+1".

Vayamos un poco mas allá, y declaremos algo, por ejemplo b (le damos un valor de 65):

Figura 13. Puedes escribir cualquier tipo de código en la Sesión Interactiva, incluyendo declaraciones de variables.

Dado que esto es JavaScript, no solo puedes declarar variables, o usar matemáticas básicas, sino que puedes utilizar objetos de JavaScript, como la clase String, tal como se ilustra en la Figura 14, donde he introducido String.fromCharCode(b) + "B".

Figura 14. Podemos utilizar las clases de JavaScript y los objetos, como lo hacemos normalmente. Observa que, Venkman ha eliminado las comillas finales, de la salida en la consola. Pero como siempre, tienes que escribirlo como "B" (esto es un error que se corrigió en la última versión de Venkman, la 0.9.79.)

Obteniendo ayuda

No, no vamos a llamar a los Cazafantasmas, porque Venkman (oh, la ironía) tiene un sistema de ayuda muy sólido integrado. En cualquier momento en que escribas un comando en la Sesión Interactiva, puedes obtener ayuda sobre él, escribiendo "/help nombrecomando", o para acceder a la ayuda general, escribe "/help".

Estableciendo el contexto

Cuando Venkman se ejecuta, el llamado "contexto de evaluación" es el propio código del programa. Esto significa que el código JavaScript es evaluado de forma relativa al propio Venkman. En lugar de esto, queremos cambiar el contexto, a cualquiera que sea el documento que tengamos cargado en Mozilla. Primero, nos movemos a la pestaña "Open Windows" (Ventanas Abiertas), ver figura 15.

Figura 15. Nos movemos al panel Open Windows, donde se listan todos los documentos cargados actualmente en Mozilla.

Pulsa sobre el pequeño símbolo + al lado de "Navigator Window", lo cual debería mostrar el nombre del archivo que has cargado en Mozilla, venkman_example_1.html. Si estas leyendo esta página en Mozilla, se mostrará también esta página. Haz click con el botón derecho en el archivo, y selecciona "Set as evaluation object" (establecer como objeto de evaluación), tal como se ve en la Figura 16.

Figura 16. Estableciendo "http://www.svendtofte.com/code/learning_venkman/venkman_example_1.html" como el objeto de evaluación.

Has establecido el archivo HTML como el objeto de evaluación actual. Todo el JavaScript que introduzcas apartir de ahora, puede manipular el documento cargado, y puede extraer información del mismo documento. Prueba a introducir "document.title" en la sesión interactiva (la cual también indica que ahora está utilizando el documento, como contexto de evaluación).

Figura 17. Inspeccionando el DOM del documento actual, utilizando document.title

Verás que nos responde con el título del documento actual. Ahora, puedes ver en mi documento (prueba a desplazarte en el código fuente, si no lo puedes ver), que he declarado una variable, a. Prueba a introducir simplemente a, en la sesión Interactiva.

Figura 18. Obteniendo el valor de variables declaradas en el documento cargado.

Si quieres, puedes probar también a ejecutar la función test incluida en el archivo. Debería responderte 2.

No solo puedes obtener información del documento, utilizando la sesión Interactiva, también puedes manipularlo. Prueba a establecer el título del documento, a document.title = "muahah" + a, como en la Figura 12.

Figura 19. Manipulando el documento através de la consola de la Sesión Interactiva.

Observa,que la Sesión Interactiva tiene un historial de comandos. El pulsar sobre la tecla de dirección arriba o abajo, te mostrará los comandos que introdujiste previamente.

Depuración básica

La sección anterior trataba basicamente sobre la inspección de un documento estático. Ahora vamos a ver un script ejecutándose. Hay varias formas de hacer esto, pero comenzaremos con la mas simple y sencilla. Primero, cierra Venkman, y en el archivo cargado por Mozilla, venkman_example_1.html, pulsa sobre el enlace "move to next" (ir a siguiente), para abrir venkman_example_2.html.

Ejecuta Venkman. Asegurate de establecer el nuevo documento como contexto de evaluación.

Probablemente hallas visto la fila de los botones de la barra de herramientas, y te hallas preguntado para que sirven. Vamos a usarlos ahora. Comienza por pulsar sobre "Stop" (Parar). Verás que el botón de stop ha cambiado a un botón de stop, con tres puntos (como se muestra en la figura 20 debajo). Pero ninguno de los otros ha cambiado.

Figura 20. Barra de herramientas de Venkman, con el botón de Stop activado.

El botón de stop indica a Venkman, que pare (o mejor, que pause) cualquier script que se esté ejecutando en ese momento. En este caso, no había ningún script ejecutándose, así que no hay nada que parar. En su lugar, Venkman entra en modo "esperando-a-que-ocurra-algo". Tan pronto como un script comience a ejecutarse (si pulsas sobre algo, de forma que se lanza un evento, o la página se recarga, causando que se ejecute todo de nuevo), Venkman tomará el mando, y lo pondrá todo en pausa.

Ahora, vuelve a la ventana de Mozilla, y pulsa sobre el botón "Reload" (Volver a cargar), o presiona Ctrl+R. Cuando lo hagas, se mostrará la ventana de Venkman de nuevo, porque, en el momento en que pulsaste Reload, se volvió a cargar la página, y se comenzó a ejecutar el script que puse en la página.

Venkman, después de pausar el script de la página, debería tener un aspecto parecido al de la figura 21, observa como la línea actual está resaltada en amarillo, y que los otros botones están ahora activados.

Figura 21. Venkman se ha parado justo al inicio del bloque de script. Esperando que introduzcas algún comando, observa que los otros botones están ahora activos y que la línea de código actual está resaltada (pulsa para ver una versión no escalada).

Ejecución paso a paso

Ya hemos jugado un poco con lo mas fundamental de un depurador, hemos pausado la ejecución de un script, veamos ahora como puedes ver cada línea de código, a la vez que Mozilla lo ejecuta. Los distintos botones son, "Step over", "Step into" y "Step out". Si colocas tu ratón sobre estos botones, aparecerá un tooltip que te informa de que sirven para "step over function call" (Ejecutar la línea de código siguiente, sin entrar en las funciones), "step into function call" (Ejecutar la línea de código siguiente), y "step out of the current function" (Salir de la función actual) respectivamente (por ahora, ignora el botón "Continue", y el reloj y la flor también.)

Así que, en cualquier línea de JavaScript, puedes controlar, si el depurador debería ejecutar la siguiente línea, ejecutar la siguiente línea saltando el cuerpo de las funciones, o salir de la función actual. Pero ten en cuenta, que por el hecho de que selecciones step over, ¡no significa que la función no sea ejecutada!. Veremos esto dentro de poco.

Ahora mismo, el depurador esta parado en la primera "línea" de JavaScript. Pulsa sobre el botón "Step into" (o F11), para avanzar a la siguiente línea. El depurador esta ahora parado en la línea 4, la declaración de la variable. Prueba a introducir "a" en la Sesión Interactiva, veras que el valor es void. Pulsa sobre Step into de nuevo, y prueba a escribir "a" otra vez, y verás que ahora tiene un valor (de 1).

La siguiente línea, es la declaración de una función, simplemente pulsa sobre step into de nuevo. Verás que salta hasta la línea 9, y esto ocurre porque la declaración de la función forma un bloque (cuando se ejecute la función, el depurador se moverá através de la función línea por línea).

Ahora estás en la línea:

var b = test(a);

Puedes escribir "a" en la Sesión Interactiva, y veras que su valor es (por supuesto) 1. Si escribimos "test(a)" veremos como salida :

Figura 22. Ejecutar funciones "por delante en el tiempo", para comprobar cual será su resultado.

Nada que nos sorprenda demasiado. Pero ahora, empieza a importar, que botón pulses. Si pulsas "Step into", Venkman saltará a la línea 6, y empezará a desplazarse por la función línea por línea. Si pulsas sobre "Step over", la función también se ejecuta, pero no se verá como se ejecuta. Prueba a presionar "Step over", e introduce "b" en la Consola Interactiva, y verifica, que efectivamente, contiene el valor "passed : 1".

Sigue pulsando "Step into/over", hasta el final del script. Verás que los botones se vuelven inactivos de nuevo, y que el botón de stop está de nuevo en modo de espera. Te recomiendo que vuelvas a cargar la página, y que intentes tomar la ruta que no usaste antes, para terminar de aprender como funcionan los botones.

Figura 23. Venkman muestra siempre el "ámbito" del código que se está ejecutando. En la figura 21, el bloque de script por completo tiene fondo gris, para indicar que el nivel superior es el ámbito. En esta figura, la función test es el ámbito, y por lo tanto, tiene fondo gris.

La palabra clave debugger

Usar la ejecución paso a paso, para movernos a lo largo de un script largo no es siempre lo mas deseable. Para eso, puedes utilizar la palabra clave debugger. Cuando un script se ejecuta, y Venkman se encuentra con la palabra debugger, Venkman para la ejecución del script. Usando Mozilla, carga el siguiente archivo, venkman_example_3.html. Puedes ver la palabra debugger dentro de la función. Esta palabra actúa como un comando de Venkman, parando la ejecución.

t = 1 + 3;
function f(a) {
    debugger;
    return a+1;
}
document.write(f(t));

Ejecuta Venkman, y vuelve a cargar la ventana de Mozilla, la ventana de Venkman debería volver al frente, parada en la línea 6.

Figura 24. Venkman se para siempre que encuentra la palabra clave debugger (pulsa para ver una versión no escalada).

Observa, que Venkman no nos molestó con las líneas anteriores a debugger, tal como t = 1 + 3; y la declaración de la función o su llamada. Venkman (o mejor dicho, Mozilla) ejecutó estas líneas de forma normal, hasta encontrar la palabra clave debugger. Apartir de aquí, todo funciona como antes. Podemos movernos paso a paso por el código, utilizar los paneles, para ver información (veremos algo mas sobre el uso de los paneles mas tarde), o simplemente pulsar "Continue" (Continuar), para hacer que el script continúe ejecutándose.

Es importante tener en cuenta, que utilizar la palabra clave debugger no provoca que aparezca ningún mensaje de error en un Mozilla que no tenga Venkman ejecutándose. Sin embargo, esto es cierto solo para Mozilla e Internet Explorer en Windows, los dos únicos navegadores, que conozco, que soportan el uso de depuradores. En estos navegadores, la palabra clave debugger simplemente se ignora (== no se muestra ningún error), si no hay ningún depurador siendo ejecutado. ¡Pero causará un error en otros navegadores, asi que recuerda borrarlo del código final!

Excluyendo código y una nota sobre DHTML

Por supuesto, Venkman te permite saltar el código que no te interesa, omitiendo la depuración de archivos y funciones individuales. Este ejemplo será un poco diferente de los demás ejemplos de esta página, en el sentido de que será "HTML Dinámico". Veremos como excluir código del proceso de depuración, y como trabaja Venkman con código "vivo".

En Mozilla, carga el siguiente archivo, venkman_example_mock_dhtml.html. Este ejemplo es bastante simple, pero es suficiente, para demostrar la hablidad de Venkman de saltar funciones especificas, o archivos. Al cargar Venkman, verás que el ejemplo contiene en un archivo enlazado, el cual define una sola función:

function getPx(elm) {
    return parseInt(elm.style.left);
}

Esta función está aquí solo, para mostrar como funciona la exclusión de archivos. Basicamente, la función init se llama cuando se carga la ventana (y en cualquier momento en el que presiones el botón "start" en Mozilla), procede a establecer un intervalo, que llama repetidamente a shiftLeft. shiftLeft es la función, que se encarga de mover el cuadrado hacia la izquierda, hasta que alcanza los 500 pixels, y entonces vuelve a comenzar a 100, simple. shiftLeft llama a la función getPx, para obtener el número de pixels actual. clearDHTML es la función que lo para todo, "vaciando" el intervalo establecido en init.

Figura 25. Lista de los archivos cargados en Venkman para el ejemplo "mock_dhtml".

Comenzaremos haciendo que una función no sea depurada. Si echamos un vistazo a la función clearDHTML, veremos que contiene la palabra clave debugger, para hacer que Venkman se pare. Supongamos que no queremos esto. Hacemos click con el botón derecho del ratón sobre la función en el panel de Scripts Cargados, lo cual hace que se muestre el submenú de la función.

Figure 26. Como impedir que una función sea depurada.

Verás que la función ahora aparece en rojo, y en cursiva, como resultado, indicando que la estamos excluyendo. Fijate también en como indica el nombre del archivo el hecho de que contiene una función que se va a excluir.

Figura 27. Como desactivar la depuración de una sola función. Fijate en como se indica esto, usando un texto rojo en cursiva.

Si volvemos a Mozilla, y pulsamos sobre el botón "stop", no se nos mostrará la ventana de Venkman. Ahora vuelve a incluir el archivo para depuración (simplemente vuelve al mismo submenú, y desmarca la opción de excluir), y lanza de nuevo el script (pulsa "start"); prueba a pulsar "stop" de nuevo. Verás que esta vez Venkman reacciona, y se muestra la ventana.

Quizás lo mas interesante, sea el ejemplo de como puedes hacer que no se depuren ciertas funciones, y que en ese caso ni tan siquiera entraremos en la función. Para ilustrar esto, añade un punto de ruptura (veremos mas sobre los puntos de ruptura mas adelante, por ahora, simplemente sigue las instrucciones), en la línea 21. Para hacer esto pulsa sobre el margen izquierdo, y debería aparecer una "B" en rojo. Tan pronto como hagas esto, Venkman se parará en esta línea (ya que un punto de ruptura es una instrucción que indica a Venkman el que se pare en la línea en la que se añadió, cuando llegue a ella, y recuerda que esto es un script DHTML, de forma que está iterando continuamente.)

Figura 28. Venkman está parado en una línea del script, al haber utilizado un "punto de ruptura".

Elimina el punto de ruptura, pulsando sobre la "B" roja dos veces (primero se convertirá en una "F" naranja, y la segunda vez desaparecerá). Y pulsa entonces sobre "step into", de forma que entremos a la función getPx, en el archivo .js enlazado. Pulsa sobre step into unas cuantas veces más, y saldrás de la función de nuevo. Sigue pulsando "step into", y verás que nos estamos moviendo en un ciclo. Ahora, vamos a intentar no tener que entrar en el archivo que contiene getPx. En este ejercicio, vamos ha excluir de la depuración el archivo entero, tal como se ve en la figura 29.

Figura 29. Excuyendo un archivo completo de la depuración.

Y si volvemos a la ejecución paso a paso en Venkman, comprobarás que ya no entramos en el archivo .js enlazado que contiene a getPx. Si quieres depurar este archivo de nuevo, es tan simple como ir al mismo submenú, y seleccionar "Debug contained functions" (Depurar las funciones que contiene este archivo).

Ya has aprendido el uso básico de Venkman. Movernos paso a paso através del código, establecer puntos de ruptura (veremos mucho mas sobre los puntos de ruptura mas tarde). Deberías haber aprendido lo suficiente para utilizar Venkman, para depurar tus proyectos, pero Venkman ofrece muchas otras formas de obtener información. Lee la siguiente sección, para aprender como obtener información de Venkman (y recuerda, que obtener información, es crucial para encontrar los errores en el código).