Cómo depurar código JavaScript en el navegador

En este tutorial, aprenderás a depurar en JavaScript con la ayuda de ejemplos.

Cuando se programa, es posible que se encuentren errores al escribir código. Los errores no necesariamente son malos. De hecho, la mayoría de las veces, nos ayudan a identificar problemas con nuestro código. Es esencial saber cómo depurar el código y corregir errores.

La depuración es el proceso de examinar el programa que se esta codificando, encontrar el error y corregirlo.

Hay diferentes formas de depurar un programa JavaScript.

1. Usando console.log()

Se puede usar el método console.log() para depurar el código. Se puede pasar el valor que deseas verificar en el método console.log() y verificar si los datos son correctos.

La sintaxis es la siguiente:

console.log(objeto/mensage);

Se puede pasar un objeto como parametro al método console.log() o simplemente una cadena de texto.

En el tutorial anterior, usamos el método console.log() para imprimir un resultado en la consola. Sin embargo, también se puede utilizar este método para la depuración. Por ejemplo:

let a = 5;
let b = 6;
let c = a + b;

// si queremos ver el valor de la variable c
console.log(c);

//entonces hacemos otras operaciones
if(c) {
       // hacer algo
}

Si tu navegador admite la depuración, se puede usar console.log() para mostrar los valores de JavaScript en la ventana del depurador:

El método console.log() no es específico de los navegadores. También está disponible en otros motores de JavaScript.

La palabra clave debugger

La palabra clave del debugger detiene la ejecución de JavaScript y llama (si está disponible) a la función de depuración.

Esto tiene la misma función que establecer un punto de interrupción en el depurador.

Si no hay depuración disponible, la declaración del debugger no tiene efecto.

Con el debugger activado, este código dejará de ejecutarse antes de ejecutar la tercera línea.

let x = 15 * 5;
debugger;
console.log(x);

Puntos de interrupción

En la ventana del depurador, se pueden establecer puntos de interrupción en el código JavaScript.

En cada punto de interrupción, JavaScript dejará de ejecutarse y permitirá examinar los valores de JavaScript.

Después de examinar los valores, se puede reanudar la ejecución del código (normalmente con un botón de reproducción).

Herramientas de depuración de los principales navegadores

Normalmente, se activa la depuración del navegador con F12 y seleccionando "Consola" en el menú del depurador.

De lo contrario, sigue estos pasos:

Chrome

1.      Abre el navegador.
2.      En el menú, selecciona "Más herramientas".
3.      En herramientas, elije "Herramientas de desarrollador".
4.      Finalmente, seleccione Consola.

Firefox

1.      Abre el navegador.
2.      En el menú, selecciona "Desarrollador web".
3.      Finalmente, selecciona "Consola web".

Edge

1.      Abre el navegador.
2.      En el menú, selecciona "Herramientas para desarrolladores".
3.      Finalmente, selecciona "Consola".

Ópera

1.      Abre el navegador.
2.      En el menú, selecciona "Desarrollador".
3.      Desde "Desarrollador", selecciona "Herramientas de desarrollador".
4.      Finalmente, selecciona "Consola".

Safari

1.      Abre el Safari, Preferencias, Avanzado en el menú principal.
2.      Marcar la opción "Mostrar menú de desarrollo en la barra de menú".
3.      Cuando aparece la nueva opción "Desarrollar" en el menú:
4.      Elije "Mostrar consola de JavaScript".