Depuración de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


Pueden ocurrir (ocurrirán) errores cada vez que escriba algún código de computadora nuevo.


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. Hay no habrá 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 una función integrada. Depurador de JavaScript.

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

Con un depurador, también puede establecer puntos de interrupción (lugares donde se ejecuta el código). se puede detener) y examinar las 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 Presione la tecla F12 y seleccione "Consola" en el menú del depurador.


El método console.log()

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

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

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

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

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

</body>
</html> 

Consejo: Lea más sobre el método console.log() en nuestra Referencia de consola de JavaScript.


Establecer puntos de interrupción

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

En cada punto de interrupción, JavaScript dejará de ejecutarse y le permitirá examinar 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 del depurador

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 punto de interrupción 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 que ejecuta la tercera línea.

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

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

</body>
</html>

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:

Cromo

  • Abra el navegador.

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

  • En herramientas, elija "Herramientas de desarrollador".

  • Finalmente, seleccione Consola.

Firefox

  • Abra el navegador.

  • En el menú, seleccione "Desarrollador web".

  • Finalmente, seleccione "Consola web".

Borde

  • Abra el navegador.

  • En el menú, seleccione "Herramientas de desarrollador".

  • Finalmente, seleccione "Consola".

Ópera

  • Abra el navegador.

  • En el menú, seleccione "Desarrollador".

  • En "Desarrollador", seleccione "Herramientas de desarrollador".

  • Finalmente, seleccione "Consola".

Safari

  • Vaya a Safari, Preferencias, Avanzado en el menú principal.

  • Marque "Habilitar Mostrar menú Desarrollar en la barra de menú".

  • Cuando aparezca la nueva opción "Desarrollar" en el menú:
    Elija "Mostrar error Consola".


¿Sabías?

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