JavaScript Debugging

JavaScript Debugging

Contenido original de W3Schools


Los errores pueden ocurrir (ocurrirán) cada vez que escriba algo de código en una nueva computadora.


Depuración de código

El código de programación puede contener errores de sintaxis o errores lógicos.

Muchos de estos errores son difíciles de diagnosticar.

A menudo, cuando el código de programación contiene errores, no sucederá nada. No hay mensajes de error y no obtendrá indicaciones sobre dónde buscar errores.

Buscar (y corregir) errores en el código de programación se denomina depuración de código.


Depuradores de JavaScript

La depuración no es fácil. Pero, afortunadamente, todos los navegadores modernos tienen un depurador de JavaScript integrado.

Los depuradores integrados se pueden activar y desactivar, lo que obliga a informar los errores al usuario.

Con un depurador, también puede establecer puntos de interrupción (lugares donde se puede detener la ejecución del código) y examinar variables mientras se ejecuta el código.

Normalmente (de lo contrario, siga los pasos al final de esta página), activa la depuración en su navegador con la tecla F12 y selecciona "Consola" en el menú del depurador.


El método console.log()

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

Ejemplo:

<!DOCTYPE html>
<html>
<body>

<h1>Mi primera pagina web</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Tip: Lea más sobre el método console.log() en nuestro módulo JavaScript Console Reference


Establecer puntos de interrupción (breakpoints)

En la ventana del depurador, puede establecer puntos de interrupción (breakpoints) en el código JavaScript.

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

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


La palabra clave debugger

La palabra clave 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 breakpoint en el depurador.

Si no hay depuración disponible, la declaración del depurador no tiene ningún efecto.

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

Ejemplo:

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Ver ejemplo


Herramientas de depuración de los principales navegadores

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

De lo contrario siga estos pasos:

Chrome

  • Abra el navegador.

  • En el menú, seleccione "Más herramientas".

  • En herramientas, elija "Herramientas de desarrollador".

  • Finalmente, seleccione Consola.


¿Sabías?

La depuración es el proceso de probar, encontrar y reducir errores en programas de computadora. El primer error informático conocido fue un error real (un insecto) atrapado en los componentes electrónicos.


W3Schools es el sitio de desarrolladores web más grande del mundo.

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!