Usando el depurador de JavaScript Venkman
una guía de Venkman un poco mas útil que una toalla
La habilidad de usar puntos de ruptura es una de las mas importantes en los scripts complejos, y por lo tanto, esta sección es también una de las mas importantes. En Mozilla, carga el siguiente archivo, venkman_example_6.html.
Tanto el ejecutar el código línea a línea como el usar la palabra clave debugger tiene
sus desventajas. Si ejecutamos el código línea a línea, tienes que moverte a lo largo de todo
el script; la palabra clave debugger tiene que insertarse en el código en sí.
Si decides que quieres parar en determinado punto, tienes como opciones o bien entrar en el código,
y comenzar de nuevo, o ejecutar el código línea a línea hasta el lugar en cuestión.
Aquí es donde necesitamos puntos de ruptura.
Un punto de ruptura funciona de manera muy parecida a la palabra clave debugger.
Hace que Venkman se pare, pero solo si el depurador llega a la línea marcada con el punto de ruptura.
Un punto de ruptura solo se utiliza, si la línea en la que está se ejecuta.
Por lo tanto no hace falta decir, que solo se pueden establecer en líneas que tengan código.
Dicho esto, existen dos clases de puntos de ruptura. Los puntos de ruptura fuertes solo se pueden
establecer dentro de funciones, y actúan de forma muy parecida a la palabra clave debugger,
haciendo que Venkman se pare, justo antes de que la línea sea ejecutada.
El otro tipo, son los llamados puntos de ruptura futuros. Representan el compromiso del depurador,
de parar tan pronto como sea posible. Esta clase de puntos de ruptura se utiliza sobre todo
fuera de las funciones.
Cuando cargamos un archivo en el panel de código fuente, las localizaciones posibles para un punto de ruptura fuerte se indican con una línea en el margen gris de la parte izquierda.
Figura 46.
Los lugares en los que es posible establecer un punto de ruptura para este código son las líneas 9, 10, 14 y 15.
Como puedes ver, el guión "-" indica la localización en la que podemos añadir un punto de ruptura fuerte. Prueba a pulsar sobre el guión "-" en la línea 15, debería cambiar a una "B" roja.
Figura 47.
Añadiendo un punto de ruptura fuerte en la línea 15 (pulsa para ver una versión no escalada).
Como puedes ver en la Figura 47, añadir un punto de ruptura, hace que aparezca en el panel de Puntos de ruptura (Breakpoints). Observa también, que en el panel de Scripts Cargados, la caja azul que venimos viendo habitualmente tiene un punto rojo. Esto indica que en esta función, se ha añadido un punto de ruptura. Puedes usarlo también como atajo al punto de ruptura. Si pulsamos sobre la función se resaltará el código de la función en el panel de código fuente. Si pulsamos sobre el punto de ruptura en el panel de Puntos de Ruptura saltaremos directamente a esa línea.
Ahora, vuelve a Mozilla, y vuelve a cargar el documento. Observa que (de forma similar a cuando utilizábamos
la palabra clave debugger), se mostrará de nuevo la ventana de Venkman.
Figura 48.
El script se ha parado en la línea 15, observa que la Sesión Interactiva
muestra el valor de a (pulsa para ver una versión no escalada).
Por ahora, simplemente ignora el hecho de que halla muchas mas líneas que de repente se muestran como posibles
lugares para añadir puntos de ruptura (será lo siguiente que veamos). Simplemente fijate en el valor de a.
Ahora, muevete hasta la línea 10, y añade un punto de ruptura fuerte en esa línea.
Una vez hecho esto, pulsa sobre "Continue". Verás que Venkman para la ejecución
en el punto de ruptura que acabas de añadir. Te puedes seguir moviendo por el código de esta forma,
tanto como quieras, o hasta que termine el script. Establecemos un punto de ruptura,
pulsamos Continue, nos desplazamos, establecemos el siguiente punto de ruptura (o los añadimos todos de una vez.)
Figura 49.
Nos paramos en el siguiente punto de ruptura en la línea 10. Observa que primero
utilicé la Sesión Interactiva para ver el valor de b, y después establecer su valor.
Y esto es todo sobre los puntos de ruptura fuertes. Solo nos queda recordar, que los puntos de ruptura fuertes solo se pueden añadir dentro de funciones.
Si quieres eliminar un punto de ruptura, esto es tan simple como pulsar la "B", de forma que se convierta en una "F", y otra vez más, de forma que se convierta en un guión "-".
Solo puedes establecer puntos de ruptura fuertes dentro de funciones. Si necesitas establecer un punto de ruptura fuera de una función, puedes utilizar los llamados puntos de ruptura "futuros". Esto basicamente significa, que si se carga un archivo, con la misma URL que el actual, y hay código ejecutable en la línea donde se estableció un punto de ruptura futuro, Venkman parará la ejecución tan pronto como sea posible (ya se que suena raro, yo tampoco lo entiendo.)
Vuelve a cargar la página, y borra todos los puntos de ruptura. Debería tener un aspecto parecido al de la Figura 46. Ahora, pulsa sobre la línea 4, y verás que aparece una F. Añade también un punto de ruptura futuro en la línea 5, una línea vacía (y aparecerá otra F en esa línea.)
Figura 50.
Estableciendo un punto de ruptura futuro en las líneas 4 y 5.
Si vuelves a Mozilla, y vuelves a cargar la página, parará justo en la línea 4 (observa además que la F se ha convertido en una B). Esto es así porque en este archivo, de la misma URL que el anterior, había código ejecutable en la línea 4.
Si pulsas sobre "Continue", observarás como el script pasa sin pararse por el segundo punto de ruptura futuro. Ya que no había código ejecutable en esa línea. Fijate también, en que una vez que el script se está ejecutando, es capaz de indicarnos TODOS los lugares donde se pueden colocar puntos de ruptura. Observa como se ha incluido la línea 17 como un lugar posible. Si pulsamos sobre esta línea, aparecerá una "B" roja.
Figura 51.
Una vez que el archivo se está ejecuntando, Venkman nos puede indicar todas las localizaciones
donde es posible añadir un punto de ruptura. Observa que el segundo punto de ruptura futuro
sigue siendo solo una F naranja, dado que Venkman no puede parar en esa línea.
No tienes que preocuparte demasiado de las diferencias entre los puntos de ruptura fuertes y futuros, aparte de que los futuros son los únicos que se pueden añadir fuera de las funciones. Puede parecer confuso, pero en serio, no lo es. Normalmente, se puede ver a simple vista donde puede o no puede parar Venkman.
Para aquellos que les interese (y que puedan entenderlo), parece ser que la razón por la que los puntos de ruptura futuros son necesarios, es que una vez que se ha ejecutado el código que no está dentro de funciones, y no existe ninguna referencia mas, se utiliza un sistema de recolección de basura sobre él por parte del engine JavaScript, por lo tanto ya no "aparece" en el código, y por lo tanto Venkman no puede establecer un punto de ruptura real fuera de las funciones.
Puede parecer evidente, pero es necesario indicar, que los puntos de ruptura son reutilizados
una y otra vez, cada vez que Venkman se encuentra con esa línea a ejecutar. Carga el siguiente archivo,
venkman_example_7.html,
y establece un punto de ruptura en la función f, en la línea 6, y ejecuta después
el script, verás que cada vez que se llama a f, el script se para.
Cada punto de ruptura tiene una serie de propiedades asociadas, estas propiedades te permiten crear puntos de ruptura "inteligentes", cuyo comportamiento depende de condiciones establecidas por tí. En Mozilla, abre el siguiente archivo, venkman_example_8.html. Abre Venkman, y establece un punto de ruptura en la línea 5, y haz click con el botón derecho después en cualquier sitio de la misma línea, para hacer que se despliegue el siguiente menú.
Figura 52.
Desplegando el menú contextual de los puntos de ruptura.
Pulsamos sobre la entrada properties (propiedades), para que aparezca la hoja de propiedades. Vamos a ver cada una de las opciones una por una.
Figura 53.
La hoja de propiedades de los puntos de ruptura.
Ni "Enable breakpoint" (Activar punto de ruptura) ni "Clear breakpoint after first trigger" (borrar punto de ruptura después del primer lanzamiento) funcionan en mi caso, pero si lo hacen en tu caso, es bastante obvio para lo que sirven... :)
Tobias Hinnerup informa de que "Clear breakpoint after first trigger" funciona correctamente en la última versión de Venkman!
Esta es la parte mas interesante de la hoja de propiedades. Cuando
marcas esta casilla, podrás usar una función
que se ejecutará en el ámbito de la función, donde está situado el
punto de ruptura (la función se llama __trigger__).
Introduzcamos lo siguiente como cuerpo de la función.
(ten en cuenta, que puede que tengas que aumentar el tamaño de la hoja de propiedades, arrastrando los
bordes, antes de poder introducir el código).
a++;
También podemos especificar qué se debería hacer una vez se ha ejecutado esta función, por ahora, solo queremos añadir código extra, independientemente del resultado (insertando código de depuración al vuelo, basicamente), asi que pulsamos sobre "Continue regardless of result" (Continuar independientemente del resultado). Debería tener un aspecto similar al siguiente:
Figura 54.
Introduciendo código en la función de punto de ruptura.
haz click sobre apply (aplicar), y vuelve a cargar Mozilla. Los números devueltos deberían ser una unidad mayor que antes:
1 2 3 4 5
La opción "Stop regardless of result" (Parar independientemente del resultado) simplemente para la ejecución de Venkman, tal como lo haría un punto de ruptura normal, permitiendo que puedas inspeccionar el estado del programa.
La opción "Stop if result is true" (Parar si el resultado es true) es mas interesante. Basicamente
permite que tus puntos de ruptura se conviertan en puntos de ruptura condicionales. Introduce el siguiente código
en el cuerpo de la función __trigger__.
return a%2==0;
Esto hace que Venkman se pare en el punto de ruptura, cada vez que a es un número par.
Puede que hallas notado también que se le pasa un parámetro __count__
a la función. Este parámetro indica el número de veces
que hemos pasado por el punto de ruptura. ¿Quieres que solo se pare en el punto de ruptura
las tres primeras veces? Entonces podrías usar el siguiente código:
return __count__<4;
Observa, que count comienza valiendo 1, (esto solo funcionará, si la opción "Stop if result is true" esta marcada por supuesto). Durante la depuración, puedes resetear el contador, a cualquier valor que desees, utilizando la caja de texto "Trigger count", e introduciendo simplemente el número que quieras.
La última opción nos permite volver de la función "antes" con el resultado (en lugar de permitir a la función que siga su curso, y vuelva normalmente.) Consideremos el siguiente código:
if (a%2==0) return "a era par (" + a + ")";
else return "a era impar (" + a + ")";
Debería mostrar la siguiente salida en Mozilla:
a era par (0) a era impar (1) a era par (2) a era impar (3) a era par (4)
"Pass exceptions to caller" (Pasar excepciones a quien llamó a la función), determina, si las excepciones que se lancen
en la función __trigger__, se pasan a nuestro código o no.
Esta es una muy buena forma de probar si tu script puede manejar determinados tipos de errores de forma correcta.
El último check box, "Log result" (Registro de resultados), significa simplemente, que se escribirá el resultado en la Sesión Interactiva.
Para que esto funcione bien,
necesitas devolver (return) algo. De forma que el ejemplo a++
que usamos antes, mostraría lo siguiente en el registro:
LOG: undefined LOG: undefined LOG: undefined LOG: undefined LOG: undefined
Sin embargo, si usaramos el ejemplo "a es par/impar" de arriba,se imprimirá lo siguiente en la consola (y en Mozilla):
LOG: a era par (0) LOG: a era impar (1) LOG: a era par (2) LOG: a era impar (3) LOG: a era par (4)
Ahora que hemos visto mas detenidamente los puntos de ruptura, puede que te estes preguntado que mas puede ofrecerte Venkman. ¡Hay más! La siguiente sección cubre tres aspectos importantísimos del depurador, que nos ayudan en la medida del rendimiento y en la depuración.
¡El productor de contenido independiente se niega a morir! jz