Puntos de interrupción en JavaScript

  1. Puntos de interrupción
  2. Puntos de interrupción en JavaScript
  3. Palabra clave Debugger en JavaScript
Puntos de interrupción en JavaScript

En este artículo, discutiremos el uso y los beneficios del punto de interrupción y cómo depurar nuestro código JavaScript con la ayuda de la palabra clave debugger y el modo de depuración del navegador.

Puntos de interrupción

La mayoría de las veces, el código de nuestro programa contiene pocos errores de sintaxis lógica, y nuestro programa no proporciona el resultado deseado según las declaraciones dadas. Entonces, para resolver errores y depurar el código de nuestro programa, debemos detener la ejecución y verificar el flujo de ejecución en cada paso.

Usamos puntos de interrupción en nuestros programas para detener la ejecución, y varios lenguajes de programación contienen específicamente palabras clave de puntos de interrupción.

Las palabras clave de puntos de interrupción detienen la ejecución durante el tiempo de ejecución del código porque, la mayoría de las veces, los errores no muestran ningún mensaje o registro de error, y necesitamos averiguar cuál es el problema real.

Puntos de interrupción en JavaScript

La depuración es un proceso complicado, y ahora la mayoría de los navegadores ofrecen un depurador de JavaScript integrado. Podemos establecer puntos de interrupción con depuradores y definir dónde debemos detener la ejecución.

Podemos examinar los valores de las variables en tiempo de ejecución mientras se ejecuta el código.

Podemos activar la depuración en nuestro navegador pulsando la tecla F12, y desde el menú del depurador, seleccionar la sección Consola. Si nuestro navegador admite la depuración, podemos usar el método console.log() para mostrar y examinar los valores.

Ejemplo de consola:

<!DOCTYPE html>
<html>
<body>

<h1>Delftstack learning</h1>

<h2>JavaScript debugger keyword example</h2>

<p>You can on debugger with F12 key and select console in debugger menu.</p>

<script>
a = 2;
b = 4;
sum = a + b;

console.log(c); // it will display the value of sum variable
</script>

</body>
</html>

En la fuente HTML anterior, hemos utilizado el método predeterminado console.log() para mostrar la suma de las variables a y b; podemos ver la sección console de inicio de sesión del modo depurador.

Podemos establecer puntos de interrupción en la ventana del depurador para el código JavaScript y la ejecución se detendrá en cada punto de interrupción, lo que ayudará a examinar los valores de JavaScript. Podemos reanudar la ejecución nuevamente con el botón de reproducción en la ventana del depurador.

Palabra clave Debugger en JavaScript

La palabra clave depurador de JavaScript se utiliza en sentencias de código para detener la ejecución; realiza la misma funcionalidad que establecemos puntos de interrupción en el depurador.

Ejemplo de depurador:

<!DOCTYPE html>
<html>
   <body>
      <h1>Delftstack learning</h1>
      <h2>JavaScript debugger keyword example</h2>
      <p id="test"></p>
      <p>You can on debugger and see the execution will be stop at third line.</p>
      <script>
         let sum = 15 + 5;
         
         debugger; // to stop execution
         
         document.getElementById("test").innerHTML = sum;
         
      </script>
   </body>
</html>

En el código HTML anterior, hemos utilizado la palabra clave debugger en el código JavaScript para detener la ejecución y asignar la variable sum al párrafo utilizando getElementById("id").innerHTML.