En este artículo, vamos a explicar cómo depurar JavaScript usando DevTools en Chrome paso a paso. Si desea depurar su código JavaScript en Chrome, entonces debe seguir estos pasos como se menciona a continuación.

Descripción del proyecto

Voy a demostrar un ejemplo de cómo depurar el código JavaScript dentro de Chrome. En este paso, voy a dar una descripción básica del código. Este proyecto trata sobre la operación de la módulo de computación entre dos números. Este ejemplo le permite pasar el valor de dividendos y divisor respectivamente. Posteriormente, al hacer clic en el botón de cómputo, tomará un minuto calcular el mod entre dos números y le dará la salida. La sintaxis de la operación de módulo es la siguiente:

x mod y = r

Donde x = dividendo, y = divisor y r = resto

Hay dos archivos en este proyecto, .html y .archivo js. El archivo JavaScript contiene 5 funciones para calcular el mod de dos números:

1. Haga clic en el controlador: Da un mensaje de alerta si uno o ambos campos de entrada están vacíos
2. Las entradas están vacías (): Esta función se usa para verificar si los campos de entrada están vacíos o no
3. updateLabel (): Esta función se usa para calcular el mod de dos números
4. getNumber1 (): Se usa para obtener el valor del primer número
5. getNumber2 (): Se usa para obtener el valor del segundo número

El código JavaScript se ilustra a continuación:

función onClick ()
if (inputSareEmpty ())
etiqueta.textContent = 'Alert: debe ingresar números en ambos campos.';
devolver;

updateLabel ();

función inputSareEmpty ()
if (getNum1 () === "|| getNum2 () ===")
devolver verdadero;
demás
falso retorno;


función updateLabel ()
value var1 = getNum1 ();
var value2 = getNum2 ();
var mod = "valor1" % "value2"
etiqueta.textContent = value1 + ' %' + value2 + '=' + mod;

función getNum1 ()
Entradas de retorno [0].valor;

función getNum2 ()
Entradas de retorno [1].valor;

El código de archivo HTML se ilustra a continuación:

Calcule el mod entre dos números

Ingrese el valor del dividendo

Ingrese el valor del divisor

Calcular mod (%)

Salida del proyecto:

Detección de errores

La parte triste es que cada vez que ejecutemos este código, te mostraría algunos errores. Como puede observar claramente en el siguiente ejemplo, cuando estamos insertando los valores, la salida no está definida en lugar de un resultado real. Entonces, ahora tenemos que detectar la causa original del error que se explica brevemente en el mismo artículo más tarde.

Ejemplo

En este ejemplo, vamos a pasar valores que dan la salida indefinida como se muestra en la imagen a continuación.

Entonces, ahora tenemos que solucionar este error rápidamente. En este paso, nuestro objetivo principal es detectar la fuente de errores. Para la detección rápida del error, debe depurar el código JavaScript en Chrome.

Para esto, debe ejecutar la aplicación en Chrome, y luego debe abrir DevTool presionando las teclas cortas Ctrl+Shift+I. Después de abrir el DevTool, podrá ver la pantalla que se muestra a continuación. Además de muchas tareas realizadas por DevTool, también puede monitorear solicitudes, cambiar CSS.

Descripción general de la herramienta de desarrolladores

Puede depurar su código JavaScript en la pestaña Panel de origen. Tiene 3 partes como se muestra a continuación:

1. Página de navegador de archivos: Las solicitudes de cada archivo se pueden enumerar en esta pestaña.
2. Editor de código: Muestra el contenido del archivo
3. Panel de depuración de JavaScript: Utilizado para inspeccionar JavaScript

Depuración de código

La forma más sencilla de depurar un error en su código es que tiene que insertar el consola.registro() función dentro de su código para inspeccionar los valores simultáneamente.

función updateLabel ()
value var1 = getNum1 ();
consola.log ('value1:', value1);
var value2 = getNum2 ();
consola.log ('value2:', value2);
var mod = parseint (value1) % parseint (valor2);
consola.log ('resultado:', mod);
etiqueta.textContent = value1 + ' %' + value2 + '=' + mod;

Aunque el consola.registro() La función puede ser una buena opción para detectar los errores, pero los puntos de interrupción podrían ser una opción más efectiva, ya que le permite detener el código durante su ejecución y analizar el valor correspondiente. Además, un punto de interrupción es mejor que la consola.log () porque trabajar con consola.log () debe observar muchos pasos que deben hacerse manualmente para ver los valores en la ventana de la consola, mientras que los puntos de interrupción lo hacen más fácil trabajando directamente.

Inserción de puntos de interrupción en el código

En caso de que regrese y eche un vistazo a la funcionalidad de la aplicación, sabrá que el resultado de la operación de módulo parece ser incorrecto después de hacer clic en el "botón de cálculo". Por lo tanto, deberá poner un punto de interrupción antes del evento de clics.

Los puntos de interrupción del oyente de eventos lo ayudan a encontrar el evento específico que desea dejar de expandir el grupo correspondiente como se muestra a continuación. Como la imagen muestra claramente que al verificar el cuadro de clics detendrá la ejecución donde sea que esté presente el evento de escucha de clics.

Entra en tu código

La siguiente imagen ilustra que si desea detener la ejecución de una línea específica E.gramo. Decimos la línea 21, luego haremos clic en ella y observaremos un marcador azul en esa línea específica que se asegura de que la ejecución se detenga automáticamente cuando llegue a la línea 21.

Detectar la causa de un error

Como ponemos un punto de interrupción en la línea 21, lo que significa que el código siempre hace una pausa cada vez que la ejecución del código alcanza esa línea. Cuando el código se detiene en una determinada línea, el panel de alcance especifica sus variables locales y globales.

Como verá en la imagen a continuación, ambos valores no son enteros. Están adjuntos en citas como se ve en la imagen a continuación, así como el valor del mod también parece sospechoso. Finalmente, se detecta la fuente del error.

Corrección de errores

Ahora puede modificar el código y probarlo nuevamente. Haga clic en el icono de currículum como se muestra a la derecha de la pantalla de la ventana. Ahora reemplace la línea 20 con la línea mencionada a continuación y guarde los cambios.

var mod = parseint (value1) % parseint (valor2);

Luego desactive los puntos de interrupción y pruebe el código con diferentes valores para verificar los resultados correctos.

La salida del 24%9 es la siguiente:

La salida del 5%3 es la siguiente:

Conclusión

JavaScript es el idioma más popular y su necesidad aumenta día a día. Casi en todas partes JavaScript se está utilizando. En este artículo, explicamos la depuración del código JavaScript en Chrome. Posteriormente, discutimos cada paso en profundidad. También se proporcionan imágenes de ejemplo para cada paso para ayudarlo a comprender.