Depurar javascript con Chrome

Veamos cómo usar la consola de Chrome para depurar javascript.

Abrir la consola de Javascript de Chrome

El navegador Google Chrome viene con herramientas de depuración de javascript integradas. Abrimos con él la página web que contiene el código javascript que nos interesa y pulsamos el botón de "personaliza y controla google chrome", unos puntitos que aparecen en la parte superior derecha del navegador. Se abre un menú y elegimos "Herramientas" -> "Consola de javascript". También se puede abrir rápidamente con la combinación de teclas Ctrl + Mayús + J

Según lo tengamos configurado puede partirnos el navegador en dos, dejando en la parte inferior la consola de javascript, o bien puede abrirnos una ventana separada con la consola. Podemos separar o juntar dicha ventana pulsando el botón en la parte inferior izquierda cuyo tooltip pone "undock into separate window" o "dock into main window"

Escribir código javascript

En esta consola podemos escribir código javascript y ejecutarlo sin más que pulsar <intro>. Si nuestro código ocupa varias líneas, para empezar una nueva línea sin que se ejecute el código mantenemos pulsada la tecla <shift> al apretar <intro>. En la siguiente figura hemos creado una variable a con un objeto con dos claves (clave1 y clave2) y dos valores. Para empezar una nueva línea al escribir pulsamos <shift><intro>, para ejecutar al final, simplemente <intro> obteniendo el resultado Object que se ve en la figura

La consola tiene autocompletar, por lo que si vamos escribiendo alguna función de javascript o el nombre de alguna variable que existe, nos mostrará las posibles opciones según vamos escribiendo.

La consola, para mostrar resultados en pantalla, tiene el objeto console con el método log, de forma que podemos hacer

a = [1,2,3]
console.log(a)

y nos mostrará el contenido de a. Esto es una alternativa más elegante a los típicos "alert" en nuestro código javascript para depurar. Eso sí, console es algo que nos ofrece la consola de google chrome, por lo que no debemos eliminar esos log de nuestro código real cuando terminemos de depurar.

Por supuesto, en la consola tenemos todas las variables, objetos y funciones declarados en la página web, por lo que podemos hacer llamadas a ellas o modificar variables. Por ejemplo, la siguiente figura nos muestra una llamada a document.getElementById() y el autocompletar cuando estamos haciendo una segunda llamada.

Depurar nuestro código javascript

Para depurar el código javascript de la página, pulsamos el botón "Sources" y en la parte izquierda, debajo del botón "Elements" aparece una pequeña flechita que debmos pulsar. se abrirá un listado con todos los ficheros javascript que incluye la página. Seleccinando el de interés, vemos su código fuente (ver siguiente imagen)

En esa misma imagen hemos aprovechado para poner un breakpoint en la línea 17 sin más que hacer click sobre dicho número. Se ve como una flechita azul en ese número 17. Si ahora damos a recargar al navegador y el código javascript pasa por esa línea, se parará ahí. Por ejemplo, poniendo el breakpoint en la línea 3 y pulsando recargar la página en el navegador, vemos como el código javascript se para en la siguiente imagen

Una vez parado, en la parte derecha tenemos botones para avanzar paso a paso, entrando o saliendo de llamadas a funciones. Podemos añadir un "watch" para ver cualquier variable que nos interese y podemos ver cualquier variable definida. Si colocamos el ratón sobre una de las variables del código que esté ya definida, podemos ver su valor. En la siguiente imagen hemos puesto el breakpoing en la línea 4 y una vez recargada la página y parado el debugger en esa línea, situando el ratón sobre la variable declarada en la línea 3 (la anterior), podemos ver su valor

Enlaces

• La documentación de google developers