Usando el depurador de JavaScript Venkman

Venkman nos ofrece una serie de ventanas con información, apoyadas en el engine Javascript SpiderMonkey. Aparte de proporcionarnos información, permite un gran nivel de configuración de estas ventanas. Esta página intentará servir de escaparate de estas ventanas, y mostrar como se utilizan.

La lista de Variables Locales

Hasta ahora, solo hemos utilizado la Sesión Interactiva, y el panel de código fuente, es hora de ver que otras formas de información nos ofrece Venkman. "Local Variables" (Variables Locales) es un panel bastante útil, que nos ofrece información sobre que clase de variables están disponibles de forma local, además de varias propiedades sobre estas variables.

Primero, carga el siguiente archivo en Mozilla, venkman_example_4.html.

Segundo, vamos a configurar la lista de Variables Locales, de forma que que muestre todas las propiedades. Esto puede hacerse pulsando sobre el pequeño icono de la esquina superior derecha del panel.

Figura 30. Haciendo que el panel de Variables Locales nos muestre más propiedades.

Simplemente marca todas las opciones. Dado que actualmente, no hay ningún código siendo ejecutado en el depurador, no se muestra nada. Pausa el depurador (botón Stop), y vuelve a cargar la página, y el panel debería tener un aspecto parecido al de la siguiente figura.

Figura 31. Panel de Variables Locales mostrando todas las variables que existen en el ámbito "local".

Si colapsas la lista de scope, podrás observar que hay dos elementos en el nivel superior, "scope" (ámbito) y "this". Todas las variables que puedes encontrar bajo "scope", son variables que puedes acceder bajo el ámbito actual. Las variables por debajo de "this", son todas propiedades unidas a la referencia this actual.

En principio la lista puede parecer un caos, pero recuerda, que la lista muestra todas las propiedades del objeto Window, que incluye tanto el objeto this actual, como el ámbito actual. Desplazate a lo largo de la lista, y puede que encuentres entradas familiares como document, location y otras.

Pero lo que nos interesa ahora mismo, no son todas estas propiedades. Como puedes ver en el código fuente, nuestro script se parece a esto:

var a;
function testObj(a,b) {
    this.a = a;
    this.b = b;
}
a = 1;
var b = new Array(1,"a");
var c = 1.1;
var d = String.fromCharCode;
var e = new testObj(a,b);
document.write(e.b[1]);

Prueba a ejecutar la primera línea de JavaScript, y verás como la lista de variables locales contiene ahora también las variables declaradas en el script:

Figura 32. Todas las variables relevantes resaltadas en la lista de Variables Locales.

Ahora, puede que te estés preguntando por qué están TODAS aquí, después de todo, solo hemos ejecutado la primera línea, donde solo se declara a. Esto es debido a una característica de JavaScript, una variable que se declara en cualquier sitio de una función, está declarada en todas partes, pero su valor permanece como "void" (o en términos JavaScript mas convencionales, "unassigned" (sin asignar), hasta que se le asigna un valor. El siguiente código (del libro de David Flanagan JavaScript, La Guía Definitiva, 4ª Edición), debería mostrarlo claramente:

var scope = "global";
function f() {
    alert(scope);       // Muestra "undefined", no "global"
    var scope = "local";// Se declara aquí, está definida en todas partes
    alert(scope);       // Muestra "local"
}
f();

Ahora que sabes porque muestra TODAS las variables, ejecuta las primeras líneas del script. Observa que a cambia de void a un valor de 1.

Figura 33. A la variable a se le asigna un valor de 1, de tipo entero.

Ejecuta unas pocas líneas de código más (una línea cada vez), hasta que se declare b. Observa como se le asigna un valor a la variable, como ocurrió con a, pero en este caso además se hace expandible:

Figura 34. A b se le asigna un array. Fijate en la propiedad implícita, length

Observa, que aparte de las propiedades contenidas en el array, b también contiene la propiedad length, que todos los arrays poseen.

Ejecuta unas pocas líneas más, hasta llegar a la función constructora testObj, y verás como scope y this pierden la mayor parte de su contenido.

Figura 35. En esta imagen, podemos ver como el ámbito cambia, dependiendo del contexto.

Dado que has entrado en una función, nos encontramos en la primera línea. Aquí, podemos ver el ámbito, que contiene las variables a y b, ambas pasadas como parámetro. Además, verás que la palabra clave this esta vacía. Esto se debe a que this, en este contexto no referencia a la ventana, sino al objeto actual (el objeto que la función testObj está creando en ese preciso momento).

Prueba a hacer click con el botón derecho sobre una propiedad, y selecciona "Change value" (Cambiar valor). Puedes introducir un nuevo valor. Prueba a cambiar el segundo valor de b, de "a" a lo que quieras:

Figura 36. Cuando introduzcas un nuevo valor, asegurate de que es JavaScript válido. De forma que, si introduces una cadena, utiliza " o '. También puedes introducir referencias a otras variables u objetos de JavaScript.

Si continuamos ejecutando el código, hasta el final del script, verás que Mozilla escribió lo que introdujeras en el cuadro de texto, en la página.

Verás, que los distintos elementos de la lista de Variables Locales tienen diferentes iconos, y que además, cada uno de ellos tiene un campo llamado "Flag", que muestra cosas raras. Cada icono, indica que clase de valor almacena la variable, y el flag indica diferentes propiedades sobre la variable.

Flags

flag	significado
e	Propiedad enumerable
r	Propiedad de solo lectura (declarada utilizando const )
p	Propiedad permanente (no puede ser borrada)
A	Alias de otra propiedad (parece que está obsoleto, asi que no verás este flag)
a	Argumento a una función
v	Declarado con var
h	Hinted, aunque no se que significa eso

Iconos de tipos de datos

Icono	Tipo de dato
	Void (undefined)
	Booleano
	Entero
	Objeto
	Null
	Cadena
	Doble
	Función

La lista de Inspecciones

El panel de Inspecciones (Watches) es un panel similar al de Variables Locales, normalmente se encuentra detrás del panel de "Variables Locales". En este, puedes introducir varias variables, y cuando ejecutas el código, se actualizará para reflejar el valor de cada variable/propiedad cuando cambie en el código. Así que en cierta forma, actúa como el panel de Variables Locales, solo que solo muestra lo que quieras ver.

Comenzamos simplemente añadiendo algo que inspeccionar. Para esta demonstración, he escrito venkman_example_watches.html, el cual contiene dos variables, a y b, vamos a añadir también this y document, simplemente para mostrar que puedes añadir otras cosas aparte de tus propias variables.

Cualquier cosa que pongas en la lista de Inspecciones, se eval-úa. De forma que si tienes una función, donde existe una variable x, eval("x"), devolverá el valor de x. Si no existe, ocurrirá un error (aunque cuando estos errores son generados por la lista de Inspecciones, estos no causan ningún daño, asi que no debes preocuparte por ello.)

Figura 37. Añadir una expresión a la lista de Inspecciones

Después de añadir a, b, this y document, tu lista debería parecerse a la figura 38.

Figura 38. Tras haber añadido todas las inspecciones que queremos a la lista, debería parecerse a esto.

Ten en cuenta, que desde aquí también podemos configurar qué columnas queremos ver, tal como se hacia en el panel de Variables Locales. Puede que quieras añadir las diferentes columnas, de forma que obtengas la mayor cantidad de información posible. Y no te preocupes porque el valor esté marcado como "<not-available>" (no disponible). Esto es simplemente porque el depurador no está ejecutándose. Pon a Venkman en modo pausa, pulsando sobre el botón stop, vuelve a Mozilla, y vuelve a cargar la página, debería aparecer la ventana de Venkman, y la lista de Inspecciones debería cambiar para reflejar esto. Prueba a ejecutar una línea de código.

Figura 39. a y b no han sido asignados aún, así que su valor es void.

Esto se ajusta a lo que esperábamos. this y document son referencias válidas, por supuesto, e incluso podemos expandirlos, y ver lo que contienen. Si ejecutamos unas cuantas líneas de código más, hasta llegar a la línea 12, la lista de inspecciones debería parecerse a esto:

Figura 40. Se les ha asignado un valor a las variables a y b.

Ejecuta una nueva línea de código de forma que entremos en la función foo. Verás que a y b han intercambiado sus valores, y si te fijas en el código, verás por qué. Al pasar las variables a la función, se pasan como (a,b), pero cuando se reciben en la función, se reciben como (b,a), intercambiando sus valores. Con esto pretendo ilustrar, que el mismo nombre de variable puede tener varios valores, dependiendo de donde lo compruebes.

Figura 41. a y b han intercambiado sus valores, comparados con la figura 40, simplemente porque en la llamada/definición de la función, los "intercambié".

Y basicamente esto es todo lo que hay que saber sobre el uso de la lista de Inspecciones. Su mayor utilidad consiste en poder tener controlada una variable, y ver si cambia en la forma en que esperarías que cambiara o no.

Se pueden encontrar varias preguntas y respuestas sobre la lista de Inspecciones en el FAQ de Venkman. Una de las mas interesantes es, que si tu expresión aparece en gris oscuro y en negrita, esto es porque el valor de la propiedad/variable que estas inspeccionando viene del prototipo del objeto actual, y no del objeto en sí.

La Pila de Llamadas

El panel de Pila de Llamadas (Call Stack), te permite ver la pila de llamadas actual. La pila es una lista de las funciones activas en ese momento. Para verlo en acción, carga el siguiente archivo venkman_example_5.html.

Pausa Venkman, y vuelve a cargar Mozilla. El código es simple, basicamente consiste en tres funciones, que se llaman unas a otras, una cada vez. El script está diseñado para mostrar la idea que está detrás de la Pila de Llamadas. Comencemos ejecutando el script paso a paso.

Figura 42. La pila de llamadas de Venkman muestra la pila de las funciones activas actualmente.

La pila solo muestra __toplevel__, que es una palabra interna de JavaScript que se refiere al nivel superior del script (código que no está dento de ninguna función). Vamos a movernos mas allá de las declaraciones de las funciones, hasta la línea document.write(f3(0));. Ahora, pulsa sobre "Step into", una sola vez, y verás que se ha añadido un nuevo elemento a la pila.

Figura 43. La pila de Llamadas siempre coloca la función que hace menos que se llamó encima de la pila. En este caso, la función f3, es la función activa en este momento.

Ejecuta unas cuantas líneas mas de código, hasta que la función que está encima de la pila sea f1.

Figura 44. Una pila de llamadas a funciones. Las que se encuentran mas abajo, están esperando a que las que están por encima vuelvan de su ejecución.

Ahora intenta pulsar sobre uno de los nombres de las funciones que están mas abajo. No solo el panel de código fuente mostrará la función seleccionada, sino que el panel de variables locales mostrará las variables de esa función. Mas aún, cualquier cosa que introduzcamos en la sesión interactiva se evaluará de forma relativa a esa función/ámbito.

Prueba a pulsar sobre f3, la lista de Variables Locales debería parecerse ahora a esto:

Figura 45. Utilizando la Pila de Llamadas para saltar hacia atrás en una cadena de llamadas, y cambiar una variable.

Haz click con el botón derecho sobre d, y cambia su valor de 1 a 2. El cambiar c no tendría ningún efecto, ya que ya ha sido pasada a la función f2. Pero cambiar d afectará al funcionamiento del script.

Después de cambiar el valor de la variable, y de pulsar sobre "Step into", verás que el panel de Código Fuente saltará al código de la función f2, y la llamada a f1 se elimina de la pila de llamadas. Esto ocurre porque el utilizar la pila de llamadas no cambia el lugar del programa en el que estamos, simplemente nos permite ver las diversas partes de la cadena que nos han llevado a la llamada superior. Y si es relevante, también puedes cambiar variables.

Si seguimos pulsando sobre "Step into", hasta llegar a la llamada a document.write, veremos como el script escribe "2". Si no lo hubieramos interrumpido, utilizando la pila de llamadas, habría impreso "3". Por supuesto, el utilizar la pila de llamadas para cambiar d, o simplemente el cambiar d, cuando llegamos a d por primera vez (ejecutando el código paso a paso), no habría provocado ninguna diferencia. El utilizar la pila de llamadas simplemente nos permite saltar hacia atrás o hacia delante, en la cadena de ejecución.

Todo lo que hemos visto es interesante, pero no hemos aprendido nada que pueda ser utilizado directamente en la depuración, sino para ayudarnos en la depuración. La siguiente sección trata enteramente sobre los puntos de ruptura, un tema muy importante en la depuración.