Depuración de JavaScript
Los errores pueden (ocurrirán) cada vez que escriba un nuevo código de 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 los 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 que los errores se informen 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 las variables mientras se ejecuta el código.
Normalmente, de lo contrario, siga los pasos al final de esta página, active la depuración en su navegador con 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 los 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>
Sugerencia: Lea más sobre el console.log()método en nuestra Referencia de la consola de JavaScript .
Establecimiento de 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 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 del depurador
La debuggerpalabra clave 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 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;
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
- Abre el navegador.
- En el menú, seleccione "Más herramientas".
- En herramientas, elija "Herramientas para desarrolladores".
- Finalmente, seleccione Consola.
Firefox
- Abre el navegador.
- En el menú, seleccione "Desarrollador web".
- Finalmente, seleccione "Consola web".
Borde
- Abre el navegador.
- En el menú, seleccione "Herramientas para desarrolladores".
- Finalmente, seleccione "Consola".
Ópera
- Abre el navegador.
- En el menú, seleccione "Desarrollador".
- Desde "Desarrollador", seleccione "Herramientas de desarrollador".
- Finalmente, seleccione "Consola".
Safari
- Vaya a Safari, Preferencias, Avanzado en el menú principal.
- Marque "Habilitar Mostrar menú de desarrollo en la barra de menú".
- Cuando aparezca la nueva opción "Desarrollar" en el menú:
Elija "Mostrar consola de errores".
¿Sabías?
La depuración es el proceso de probar, encontrar y reducir errores (bugs) en los programas de computadora.
El primer error informático conocido fue un error real (un insecto) atrapado en la electrónica.