Error Javascript – Como depurar Javascript para principiantes

La primera vez que intentas algo, probablemente no lo hagas completamente bien.

Los escritores editan, los arquitectos rediseñan, y los programadores depuramos. Los entornos de desarrollo son generalmente lo suficientemente utiles como para dar a los programadores una pila de herramientas para ayudar a determinar donde su programa esta fallando.
Pero con Javascript, tu entorno de desarrollo es un navegador, y las cosas no son muy agradables.

Todos los navegadores actuales te informaran cuando tu código este mal, y lo que creen que lo hizo fallar. De cualquier forma, los navegadores podrían darte información engañosa o ambigua. Incluso peor, los errores que te informe podrían en realidad disparados por los errores del propio navegador.

Los navegadores actuales te dirán en que linea se genera el error. De igual manera, la linea que nos mencione podría no ser la causa real del problema. Ahí es donde las cosas se arruinan inevitablemente cuando vamos a depurar. Por ejemplo, quizá estes haciendo una llamada a un framework como Prototype cuando el script fallo – el problema probablemente no sea el framework, sino lo que envies a través de la llamada a la función, También si un error ocurre en una función anonima (Glosario #1), los navegadores sólo daran reportes confusos.

En sintesis, depurar Javascript puede ser realmente un desastre. Afortunadamente los navegadores más utilizados, Internet Explorer y Firefox, incluyen a toda regla depuradores de código. Navegadores menos conocidos como Safari, Opera y Konqueror no son tan agradables en este sentido. Aunque es tentador criticarlos, la verdad es que su repertorio en Javascript es casi tan bueno como el de los más populares. Sólo que es un poco más dificil notar que es lo que funciona mal.

Ya saben el viejo refran más vale prevenir que curar. Bueno, resulta que esto también aplica a la hora de depurar en Javascript. Hay algunas cosas que se pueden hacer mienrtas se escribe código para hacer la depuración luego un poco más sencilla.
Primero, SIEMPRE manten tu Javascript en un archivo externo al que harás referencia, por ejemplo:

¿Por qué?. Bueno, esto garantiza que el numero de linea que tu editor de texto dirá sea el mismo que el de tu navegador. Si tu página posee contenido dinamico y Javascript, entonces el número de linea en tu navegador será incorrecto.
Segundo, siempre manten la consola de Javascript de tu navegador abierta mientras probas tu código. Los navegadores tienden a mantener los errores Javascript en silencio, al igual que lo hacen con HTML. Firefox y Opera tiene un menu de desarrolladores donde puedes acceder a la consola, mientras que Internet Explorer y Safari el asunto es un poco indirecto.

En Internet Explorer, vas a Herramientas > Opciones de internet y elegis la pestaña Avanzado. Asegurate de seleccionar la opción «Mostrar una notificación por cada script error». Para acceder a la consola en Safari segui estos pasos.

Finalmente, intenta algo de programación defensiva utilizando aserciones (Glosario #2). Las aserciones no son un buen reemplazo para los manejadores de errores, sólo notan problemas en una parte exacta del código y te dicen que pasa.

Bueno, todo esto es genial, pero ¿que haces cuando realmente necesitas empezar a depurar?

La agonia de depurar

Hablemos de algunas tecnicas de depuración que funcionaran en casi cualquier navegador.
Vamos a confiar en la linea mas basica de comunicacion: la funcion alert(). Quizá quieras hechar un vistado a este mecanismo de registro, incluso aunque tenga algunas contras (tenes que añadirlo practicamente a cada linea que quieres depurar y quiza no funcione en navegadores viejos).

Hay un problema particular con el uso de alert() en la depuración, y este es que obtendras un mensaje de alerta por cada linea. Si lo usas en un bucle, tendrás que tocar retroceso repetidamente para quitar los mensajes, y podría llevarte al punto de tener que finalizar el proceso del navegador.

Para eso traigo una simple funcion log() que evade este problema tomando todos estos mensajes juntos y mostrandolos actualizados a cada segundo. Quizá suene como algo bastante pesado hacerlo por segundo, pero la mayoría de los loops en Javascript toman menos de 1 segundo en ejecutarse. Chequea el código (Click derecho y «Guardar como» para descargarlo).

Así que bueno, ahora empecemos con un peor escenario. Clickeas un boton que se supone que haga algo, pero no hay ninguna reaccion del navegador y tu consola de Javascript no muestra ningun error. ¿Que esta pasando?.

La mejor forma de saberlo es agregar a tu código llamadas a log(). Aca hay un codigo que se supone que cuente hasta un numero determinado.

Siempre pongo una llamada a log() al principio de una función, sólo para saber si en primer lugar esta siendo ejecutada. Cuando eta version del código es ejecutado, tenemos este registro:

Empezando a contar
El numero es muy chico para contar

Bueno, el error es obvio. Probablemente ya lo notaste – necesitamos «number < 1", no "number > 1″.

Después de cambiar esto parece que la funcion se ejecuta correctamente, pero todavía no vemos ninguna salida. Ya llevamos registro de la variable de conteo, pero ¿cómo sabemos que nuestro contenedor esta realmente siendo actualizado?

Usamos la funcion inspect(). Esta es una pequeña funcion parecida a log() que te dice las propiedades que tienen los objetos con los que estas trabajando. Esta incluida con el codigo fuente de log(). Tambien hay otra funcion ahi llamada inspectValues() que te dice cada propiedad definida, pero su respuesta suele ser bastante grande – definitivamente no es algo que quieras poner en un bucle.

Agreguemos una llamada a inspect() para ver que esta ocurriendo:

Y obtenemos esto:

El objeto posee estas propiedades:

innerHtml, nodeName, nodeType, parentNode, childNodes, previousSibling, nextSibling, attributes, ownerDocument, localName, tagName, id, title, lang, className, align, offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent, innerHTML…

Espera, tenemos una propiedad llamada innerHtml y otra llamada innerHTML. Eso no puede estar bien. Ahi esta nuestro problema – porque JavaScript es sensible a las mayusculas – estamos escribiendo la propiedad incorrecta. Si cambiamos esto, todo funciona.

Este fue un ejemplo básico pero los mismos principios aplican en la depuración real. De hecho, la clave esta en obtener tanta información de lo que ocurre como nos sea posible. Estas funciones log(), inspect() y inspectValues() son muy buenas para esa utilidad.

Sin más, espero les haya sido de utilidad el articulo, cualquier duda se puede resolver en los comentarios.

Error Javascript – Como depurar Javascript para principiantes
5 (100%) 3 votos