Depuración del código JavaScript
Depuración ¿Es este proceso de encontrar errores y solucionarlos cuando examina su código o programa?. Si bien se dice que JavaScript es difícil de depurar, facilitaremos sus vidas. Hoy en este artículo hablaremos sobre cómo depurar el código JavaScript.
Depurador de JavaScript
Todos los navegadores modernos tienen debuggers de JavaScript incorporados. Estos depuradores nos ayudan mostrando esos errores. Estos depuradores también se pueden activar o desactivarse dependiendo de nuestras necesidades.
Lo interesante de estos depugadores es que con esto también podemos establecer puntos de descanso. Los puntos de interrupción se colocan en nuestro código donde detenemos la ejecución del código. Cuando se detiene el código, podemos verificar los errores y examinar las variables.
Como Google Chrome es un navegador muy famoso, usaremos Chrome para la mayor parte de este artículo. Sin embargo, al final, le mostraremos cómo habilitar la depuración de JavaScript en otros navegadores también.
Para comenzar a depurar en Google Chrome, presione el F12 llave. También podemos presionar Ctrl+Shift+I para abrir el depurador. Sin embargo, incluso si estos dos no funcionan, intente hacer clic con el botón derecho desde el mouse en cualquier lugar dentro de la ventana de la pestaña del navegador. Haga clic en inspeccionar y después de eso ve a la consola.
Usando consola.Método log ()
Google Chrome admite la depuración, por lo tanto, podemos usar consola.registro() En nuestro código JavaScript para mostrarlo dentro de nuestra ventana de la consola.
Ejemplo
const str = "depuramos en la consola";// Vamos esto en la ventana de la consola
consola.log (str);
Ahora, cuando hagamos clic en F12 y vamos a nuestra consola, veremos:
Cómo establecer puntos de interrupción
También podemos establecer puntos de interrupción en la ventana del depurador. Como se mencionó anteriormente, con cada punto de interrupción que establecemos, la ejecución del código se detendrá. Luego examinaremos nuestro código y encontraremos el error. Si no encontramos el error en ese punto de interrupción, agregaremos otro punto de interrupción. Es muy fácil, ya que podemos continuar el código de ejecución con solo un botón de clic (botón de reproducción normalmente).
Supongamos que tenemos un botón. Cada vez que hacemos clic en el botón, agrega un valor al valor anterior. El valor predeterminado será 0. Ahora, si queremos depurar esto usando el punto de interrupción, tenemos que establecer un punto de interrupción. Si el valor del contador no aumenta con el clic, sabemos que el problema está en el oyente de eventos, haga clic.
Para poner un punto de interrupción en el oyente del evento, haga clic F12. Esto lo dirigirá a la ventana de la consola. En el lado de la consola, haga clic en la pestaña Fuentes y luego continúe con el punto de interrupción para los oyentes de eventos. En esto, haga clic en los eventos del mouse y luego marque la opción de clic.
Felicitaciones has establecido tu primer punto de ruptura. Cada vez que ejecute el programa, se detendrá en el Evento del oyente del evento Mouse Haga clic en. Podemos reanudarlo haciendo clic en el botón Reanudar en la parte superior de la pestaña Fuentes.
HTML:
JavaScript:
const btn = documento.getElementById ("Vanish-btn");Sea valor = 1;
btn.addEventListener ("hacer clic", function ()
btn.innerhtml = valor ++;
)
Uso de la palabra clave del depurador
Es lo mismo que el punto de interrupción explicado anteriormente, excepto que se realiza a través del código JavaScript y no manualmente. Usamos la palabra clave del depurador cada vez que deseamos depurar un código. Las palabras clave del depurador básicamente detienen el flujo de ejecución del código al igual que un punto de interrupción. Después de detener la ejecución, llama a la función de depuración incorporada. Esta función del depurador funciona igual que un punto de interrupción.
Supongamos que queremos agregar dos variables. Sin embargo, antes de mostrarlos como una alerta, quiero depurarlos. El siguiente código proporcionará la solución para esto:
Sea num1 = 5;Sea num2 = 10;
depurador;
alerta (num1+num2);
La palabra clave del depurador obliga a un punto de interrupción o detiene la ejecución del código e invoca la función de depuración. Si se requiere depuración, se llama la función del depurador; De lo contrario, no se hace nada.
Depuración en diferentes navegadores
La práctica común para comenzar a depurar en JavaScript es hacer clic en inspeccionar o presionando la tecla F12 en su navegador. Sin embargo, si eso no funciona, siga los siguientes comandos para abrir el menú del depurador.
Google Chrome
- Haga clic en el botón Menú en la esquina superior derecha de Google Chrome
- Haga clic en más herramientas
- Haga clic en las herramientas de desarrollador
- Seleccione la consola o las fuentes de acuerdo con su necesidad
Mozilla Firefox
- Cuando abra el navegador, haga clic en el menú
- Después de eso, haga clic en el desarrollador web
- Haga clic en la consola web
Microsoft Edge
- Cuando abra el navegador, seleccione Herramientas de desarrollador en el menú
- Luego seleccione la consola
Ópera
- Navegador abierto
- Seleccione el menú y luego el desarrollador seleccionar
- Ahora seleccione Herramientas de desarrollador
- Luego haga clic en la consola
Safari
- Vaya al menú principal y haga clic en las preferencias de Safari
- Haga clic en la opción avanzada
- En la barra de menú, seleccione Habilitar el menú de desarrollar desarrollar.
- Cuando se ve el desarrollo en el menú, haga clic en Mostrar consola de error.
Conclusión
Hay muchos métodos de depuración disponibles en JavaScript. Explicamos los métodos más utilizados/comunes y fáciles para depurar nuestro código JavaScript. Con el desarrollo en JavaScript, deberá depurar una y otra vez. Le sugiero que guarde este artículo como marcador en su navegador para que no tenga que buscar una y otra vez.