Herramientas de Desarrollador Web en Mozilla Firefox - Debugger p.1

En esta entrada hablare de la funcionalidad Debugger, concretamente sobre como poner breakpoints además de como ir recorriendo los métodos.

Lo primero es abrir nuestro archivo HTML al que queramos aplicar el debugger, en este caso usaré el ejercicio operandos3.js que realizamos en clase. A continuación explicaré los pasos a seguir:

1º-Ejecutar nuestro archivo operandos3.js:

2º-Abrir las herramientas de desarrollo web pulsando la tecla F12:

Podemos ver que al pulsar F12 se ha abierto una ventana en la zona inferior y en ella hay diferentes opciones (editor, consola, depurador, editor de estilo, etc), obviamente le daremos a depurador y se nos mostrará el código JavaScript de nuestro archivo .js.

3º-Hacer click en la opción depurador:

Para poner un breakpoint solo hace falta hacer click en el número de la linea del código donde queramos ponerlo, si queremos quitarlo con hacer click otra vez es suficiente.

4º-Hacer click en la linea en la que queremos poner un breakpoint:

Al poner el breakpoint en la zona de la derecha ha aparecido la linea de código donde lo colocamos, si tenemos varios breakpoints podemos desactivarlos para que no entren en el proceso de depuración.

5º-Recargamos la pagina para que inicie la depuración:

Al recargar nos llevará directamente a la linea del código a depurar, es aquí cuando usaremos los botones situados a la derecha. El 1 es para detener o reanudar la depuración, el 2 para ir depurando linea a linea, con el 3 podemos introducirnos en un método y con el 4 salimos del métodos.

En el ejemplo de las imágenes vemos el método quienEsMayor al que se le pasan dos valores, con el tercer botón nos meteremos en dicho método:

Si bajamos un par de lineas con el segundo botón vemos que se llama al método comprobarNumero que se le pasa un valor, este método comprueba si los valores de quienEsMayor son numero, pues si le damos al tercer botón iremos al método comporbarNumero y si le damos al cuarto saldremos de dicho método:

Esto a groso modo seria como depurar con la herramienta de desarrollador de Firefox.