miércoles, 7 de noviembre de 2012

Javascript: depuración de código con Chrome

Cuando programamos una web en la que utilizamos código Javascript, es común utilizar mensajes alert para ir siguiendo la ejecución de nuestro código:


Sin embargo, Chrome incluye un conjunto de herramientas de desarrollo que nos permiten depurar nuestro código:

  • crear puntos de interrupción
  • ejecutar paso a paso
  • mostrar el valor de variables
  • ...
ACTIVAR HERRAMIENTAS DE CHROME PARA PROGRAMADORES:

De esta manera hemos abierto las herramientas de desarrollador de Chrome:



AGREGAR UN PUNTO DE INTERRUPCIÓN:
Pulsamos en el margen izquierdo, donde aparecen las líneas numeradas de nuestro código:


A partir de aquí, si ejecutamos nuestro código Javascript, se detendrá la ejecución justo en este punto:


EJECUTAR PASO A PASO NUESTRO CÓDIGO:
En el margen derecho de las herramientas de desarrollador, en la parte superior vemos una botonera para controlar la ejecución del programa. 
El tercero de estos botones, es decir, la flecha hacia abajo con un puntito, ejecuta paso a paso nuestro código: