9Trucos para depurar JavaScript usando las herramientas de depuración integradas de Chrome y Firefox

Generalmente usamos las herramientas de depuración integradas en Chrome o Firefox para depurar JavaScript. Este artículo enumera algunas técnicas útiles para depurar JavaScript. Al dominarlas, pasaremos menos tiempo resolviendo errores y bugs, lo que mejorará la eficiencia de desarrollo.

1. debugger

Además de console.log, debugger es nuestra herramienta de depuración favorita y rápida. Chrome detendrá automáticamente el código durante la ejecución. Incluso puedes encapsularlo en condiciones para que se ejecute solo cuando sea necesario.

if (thisThing) { 
 debugger; 
}

2. Mostrar objetos en una tabla

A veces, hay un grupo complejo de objetos para ver. Puedes usar console.log para ver y desplazarte, o usar console.table para expandir, lo que facilita ver el contenido que se está procesando!

var animals = [ 
 { animal: 'Horse', name: 'Henry', age: 43 }, 
 { animal: 'Dog', name: 'Fred', age: 13 }, 
 { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 
console.table(animals); 

3. Usar diferentes tamaños de pantalla

Es genial instalar diferentes simuladores de dispositivos móviles en el escritorio, pero en la realidad es inalcanzable. ¿Cómo ajustar el tamaño de la ventana? Chrome ofrece todo lo necesario. Saltar a la consola y hacer clic en el botón 'Cambiar modo de dispositivo'. Observa los cambios en la ventana!

　

4. Usar console.time() y console.timeEnd() para probar bucles

Es muy útil saber el tiempo de ejecución de ciertos códigos, especialmente al depurar bucles lentos. Incluso puedes configurar múltiples temporizadores pasando diferentes parámetros a los métodos. Vamos a ver cómo funciona:

console.time('Timer1'); 
var items = []; 
for(var i = 0; i < 100000; i++}{ 
 items.push({index: i}); 
} 
console.timeEnd('Timer1'); 

El resultado de la ejecución es el siguiente:

　

5. Formatear el código antes de depurar JavaScript

A veces, el código puede tener problemas en el entorno de producción, pero tus source maps no están desplegados en el entorno de producción. No te preocupes. Chrome puede formatear tus archivos JavaScript. El código formateado no es tan útil como el código real, pero al menos puedes ver lo que está sucediendo. Haz clic en el botón {} en el explorador de código del Consola de Chrome.

　

6. Observar el llamado de funciones específicas y sus parámetros
En la consola de Chrome, puede observar funciones específicas. Cada vez que se llama a la función, se imprime los parámetros pasados.

var func1 = function(x, y, z) { 
//.... 
}; 

Salida:

　

Esta es una buena manera de ver los parámetros pasados a una función. Pero, si el consola nos muestra el número de parámetros formales sería mejor. En el ejemplo anterior, func1esperado3parámetro, pero solo se ha introducido2parámetro. Si no se maneja este parámetro en el código, es probable que se produzca un error.

7Acceder rápidamente a los elementos en la consola

Un método más rápido que querySelector en la consola es usar el símbolo dólar, $('css-selector') devolverá el primer elemento que coincide con el selector CSS. $$('css-selector') devolverá todos los elementos que coinciden. Si utiliza un elemento varias veces, puede guardarlo como una variable.

　

8Postman es excelente (pero Firefox es más rápido)

Muchos desarrolladores utilizan Postman para ver solicitudes AJAX. Postman es realmente excelente. Pero abrir una nueva ventana, escribir el objeto de solicitud y luego volver a probarlas, parece muy molesto.

A veces es más fácil usar el navegador.

Cuando usa el navegador para ver, si solicita una página de verificación de contraseña, no tiene que preocuparse por los cookies de autenticación. A continuación, vea cómo editar y reenviar solicitudes en Firefox.

Abra la consola y seleccione la pestaña Network. Haga clic derecho en la solicitud necesaria y seleccione Editar y reenviar. Ahora puede cambiar cualquier cosa que desee. Cambie el título y edite los parámetros, luego haga clic en Reenviar.

A continuación, muestro dos solicitudes iniciadas con diferentes atributos:

　

9Interrumpir cambios en el nodo

DOM es algo muy interesante. A veces cambia, y no sabe por qué. Pero, cuando está depurando JavaScript, Chrome puede detenerse cuando se modifican los elementos del DOM. Incluso puede monitorear sus propiedades. En el consola de Chrome, haga clic derecho en el elemento y luego seleccione Ajustes:

Las herramientas de depuración de páginas web integradas en Chrome y Firefox son muy potentes, muchas funciones muy útiles esperan a que las descubran.