¿Cuáles son tus mejores trucos de consola de dev / debug de JavaScript?

Answer 1

El objeto de la console y el comando del debugger .

Probablemente conozcas console.log() , pero ¿conocías console.info() , .warn() y .error() ? Todos estos producen diferentes mensajes de registro de colores en la consola, lo cual es útil si estás haciendo cosas complicadas de algoritmo.

Estos cuatro métodos también admiten cualquier número de argumentos: console.log(“click”, evt, this); por ejemplo, le permite obtener múltiples volcados de objetos navegables para una declaración de registro.

Hay otros métodos también. Verifique la página de la Red de Desarrolladores de Mozilla en el Objeto I para obtener más información.

El comando del debugger se puede colocar en cualquier parte de su código para crear un punto de interrupción. Aunque siempre puedes hacer un punto de interrupción en la consola de JavaScript, el debugger es súper útil si estás concatenando o agrupando tu script antes de que llegue al navegador (y los mapas de origen no funcionan)

Consulte la página de MDN en el depurador para obtener más información.

También recomendaría revisar el curso gratuito de Chrome Dev Tools de Code School. ¡Hay mucho por descubrir!

Answer 2

Algo que puede probar con el registro de su consola es SessionStack, tiene un plan gratuito .

Cuando lo integras en tu aplicación web (colocando un pequeño fragmento de JS en tu página), SessionStack registra la sesión del usuario: cómo interactúa el usuario con la aplicación y cómo cambia el estado del navegador.

Cuando realice el registro / info / warn / debug / error de la consola, podrá volver a reproducir las sesiones grabadas con una línea de tiempo de todos sus registros. Esto le permitirá explorar y navegar a través de todos los registros y ver cuál fue el estado del navegador y los pasos del usuario que lo activaron.

Divulgación: Soy cofundador de SessionStack.

Answer 3

Este es mi truco favorito de depuración de JavaScript

console.debugInline = function (arg) {
/ *
* esta función será
* 1. Imprimir argumentos a stderr como siempre
* 2. devuelva el arg para una inspección adicional
* /
console.error (‘\ n \ ndebugInline’);
console.error.apply (null, argumentos);
console.error (‘\ n \ n’);
volver arg
};

// código normal
ajax (
url
llamar de vuelta
);

// código de depuración en línea
ajax (
console.debugInline (url, ‘debug url’),
llamar de vuelta
);

// salida de depuración en línea a stderr
//
// debugInline
// http://www.google.com?aa=bb#cc ‘debug url’
//