Usando el depurador de JavaScript Venkman

Obteniendo Venkman

Primeramente, necesitarás descargar Mozilla, si no lo has hecho ya. Venkman no es una herramienta independiente. Está integrada en Mozilla, de forma que solo puede utilizarse para depurar scripts en Mozilla, o cualquier otro navegador basado en Mozilla (¡otra razón mas para preocuparse de las webs que escribamos funcionen bien en Mozilla!). Esta guía se escribió utilizando la versión de Venkman (0.9.75) que acompañaba a Mozilla 1.5 Alpha, pero puedes ir a www.mozilla.org, y simplemente descargar la última versión de Mozilla. Ten en cuenta, que tienes que descargar Mozilla, y no Firebird (ya que al menos en la versión 0.6.1, Firebird no tiene Venkman integrado). Ten en cuenta también, que Netscape 7.1 si incluye Venkman, pero no se qué versión, asi que si estas utilizando esta versión de Netscape, te recomiendo que compruebes la sección "Si ya tienes Mozilla", justo debajo, para actualizar Venkman.

Durante la instalación, simplemente selecciona "Complete" (Completa) en Setup Type (Tipo de Instalación). Si seleccionas "Custom" (Personalizada), asegurate de que estén marcadas tanto "Debugger" (Depurador) como "DOM inspector" (Inspector DOM) (ver Figura 1). "Debugger" es obviamente Venkman, y "DOM inspector" es otra herramienta muy útil (de la que no hablaremos aquí, pero quizás en otra página, otro día ... )

Figura 1. Asegurate de que Debugger y DOM inspector estén ambas marcadas.

Si ya tienes Mozilla

Si ya tienes Mozilla instalado, y no quieres actualizar tu navegador, puedes actualizar solo Venkman en las páginas de desarrollo de Venkman. Gracias al llamado XPInstall de Mozilla, instalar o actualizar es tan simple como pulsar un enlace. No lo he probado, pero esto debería funcionar, incluso para los usuarios de Firebird.

Ejecutando Venkman

Ahora que has instalado Mozilla (con un poco de suerte sin problemas), es hora de arrancar Venkman. Cuando ejecutes Mozilla, verás la página de inicio de Mozilla. Aunque la página de inicio no sea la misma en tu caso, deberías seguir siendo capaz de encontrar Venkman, llendo a Tools -> Web development -> JavaScript debugger, como en la figura 2. Puede que también quieras tener en cuenta, que en el FAQ de Venkman hay tres (3) formas diferentes de lanzar Venkman, para adaptarse a todas las necesidades.

Figura 2. Ejecutando Venkman, mediante el menú "tools" (herramientas) de Mozilla (pulsa para ver una versión no escalada).

Ten en cuenta, que cuando lanzas Venkman de esta forma, la página (y por lo tanto, el script que contiene la página) que está siendo depurada es la que se cargará en Mozilla. Dado que Mozilla soporta la navegación por pestañas, y documentos multiples, puedes depurar varias páginas a la vez (aunque, para velar por tu estado mental, te recomiendo que te centres en una sola página cada vez).

Una vez que se ha ejecutado Venkman, debería tener un aspecto parecido al de la figura 3 (abajo). Si parece que falte algún panel, o que están en un lugar equivocado, simplemente escribe "/restore-layout factory" en la consola (esquina inferior derecha en la captura de pantalla), para restaurar a la configuración de vista por defecto.

Figura 3. Venkman tiene este aspecto aproximadamente, después de lanzarlo (pulsa para ver una versión no escalada).

Configurando Venkman según tus gustos

Venkman contiene un total de ocho ventanas, que ofrecen distinta información. Algunas veces, la información de una de estas ventanas es mas importante que otra. Vamos a ver ahora una guía rápida sobre como configurar la distribución de las ventanas (basicamente mediante arrastrar y soltar). Para ver que clase de distribuciones son posibles, recomiendo echar un vistazo a la colección de capturas de pantalla de Robert Ginda.

Si en cualquier momento, quieres volver a la distribución original, puedes introducir "/restore-layout factory" en la consola.

Debajo del menú "view" (ver), verás dos opciones, "Save Default Layout Now" (Guardar Distribución Ahora) y "Save Default Layout On Exit" (Guardar Distribución Al Salir). Si quieres que Venkman recuerde como tienes distribuidas las ventanas, para sesiones futuras, recuerda marcar una de estas opciones, dependiendo que quieras conseguir.

Cada panel contiene los mismos cuatro elementos, que pueden verse en la figura 4. Dock, or undock window (Acoplar o desacoplar ventana); Title bar (Barra de Título), Close (Cerrar) y Tab controls (controles de pestañas).

Figura 4. Elementos que permiten configurar la distribución de las ventanas de Venkman.

Desacoplando una ventana

Desacoplar una ventana de Venkman es tan simple como pulsar sobre el botón "Undock/dock" en el panel que quieras desacoplar del programa. Se convertirá en una ventana independiente, que puedes arrastrar.

Figura 5. Desacoplar una ventana permite hacerla mucho mas grande, y si tienes una configuración de monitor dual, aprovechar al máximo ambas pantallas.

Volver a acoplar la ventana en Venkman es tan simple como pulsar sobre el mismo botón de nuevo.

Moviendo la ventana

Si no te gusta la forma en que están distribuidas las ventanas, puedes simplemente pulsar sobre la barra de título, y sin soltar el ratón arrastrarla a donde quieras mover la ventana. Mientras arrastras una ventana a otro área, debería aparecer una barra negra en un lado, donde, se situará la ventana si la sueltas (puede que además el botón de acoplado cambie a una imagen de una flecha, pero no siempre lo hace, la barra negra aparece siempre).

Figura 6. Arrastrando una ventana sobre otra, aparece una barra negra, indicando donde se situará la ventana si se suelta.

Te sugiero que muevas algunas ventanas, para ver como funciona. Notarás que algunas ventanas ya vienen distribuidas como paneles (o páginas dentro de pestañas, como prefieras llamarlo, yo los llamaré paneles en la guía.) Si quieres añadir una ventana a otra como un panel, simplemente suelta la ventana sobre el botón de acoplado de la ventana a la que quieras añadirla. Debería cambiar a la imagen de una estrella, para indicarnos "suelta aquí, y añadiremos la ventana como un panel de esta ventana".

Figura 7. Acoplando una ventana, de forma que se transforme en un panel de la ventana sobre la que se arrastró.

Ocultando ventanas

Puedes utilizar el botón "Close", para ocultar una ventana. Si la quieres de vuelta, simplemente ve al menú "View", y bajo el sub menú, "Show/Hide" (Mostrar/Ocultar), selecciona la ventana que quieras.

Divisor

Entre cada columna/fila de ventanas, hay un divisor, con un área de arrastre, debería parecerse a la figura 8.

Figura 8. Separando cada área de ventanas, tenemos un divisor.

Pulsar sobre el divisor hará que el área que apunta la flecha, se colapse. Si arrastramos el divisor, podemos cambiar el tamaño del área.

En la siguiente sección empezaremos al fin a hablar sobre como utilizar Venkman.