Chrome: Depurando Javascript

Introducción

En una entrada anterior vimos algunas de las herramientas que nos proporciona Chrome para el desarrollo web y las diferentes opciones par depuruar nuestro código que nos ofrece.  En esta ocasión vamos a ver con detalle como realizar la depuración de código javascript con las opciones que nos proporciona Chrome, para ello veremos como utilizar la ejecución paso a paso, en un post futuro veremos como usar la consola del navegador para ejecutar y probar nuestro código.

Estamos viendo navegador el navegador Chrome, pero el resto de navegadores mayoritarios, Firefox o Internet Explorer, por ejemplo, también ofrecen herramientas y operativa muy similares, así que lo que aquí se diga, lo más probable que será aplicable a estos otros también de forma similar.

Depurando con break points

Lo primero que tenemos que hacer es ir a la pestaña de Sources y seleccionar el fichero que contiene la función que deseamos depurar.

Una vez selecionado vemos el código en pantalla, entonces podemos añadir un punto de parada donde queramos ver que esta haciendo el código. Para añadir el punto hay que pulsar con el ratón en el número de línea donde deseemos crear el punto, veremos como se muestra una flecha azul, en la siguiente imágen la vemos en la línea 2.

Ahora recargamos la página, si se ejecuta al cargar la página o bien realizamos la acción que provoque su ejecución. Veremos como se para la ejecución del código y podemos inspeccionar el valor de las variables pasando el ratón por encima de estas. Veamos una pantalla de ejemplo:

En esta imágen podemos ver las diferentes partes de la pantalla. Con un fondo azul vemos la línea que actualmente se esta ejecutando. En la panalla de ejemplo también podemos ver información sobre una función, que si fuese una variable veríamos su valor. En la parte derecha vemos los botones con los que podemos controlar la ejecución paso a paso. Un primer botón que hace continuar la ejecución hasta el siguiente brakepoint, si existe, o hasta el final de la ejecución del script. Después tenemos dos botones para seguir ejecutando el script paso a paso, así vamos viendo los comandos que se van ejecutando y podemos ver los diferentes valores que tienen las variables. La diferencia entre los dos es que el primero no entra dentro del código de funciones (que no nos interese depurar porque sabes que funcionan correctamente) o si queremos entrar dentro de la función para ver que esta realizando.