11 Trucos para la consola de Javascript de Google Chrome

La consola de Google Chrome tiene muchas funcionalidades que nos pueden ayudar de forma muy interesante en nuestro debugging. En este post les presento algunos de los trucos más interesantes que seguramente les van a servir la próxima vez que tengan que desarrollar una aplicación con Javascript.

Estilizar mensajes de consola

Por defecto en la consola de Chrome los mensajes aparecen sin formato, pero si lo que necesitas es tener estilos para diferenciar ciertos mensajes basta con ingresar '%c' al inicio del mensaje de un console.log y colocar como un parámetro adicional los estilos CSS que quieres poner.

Mostrar JSON como tabla

De forma sencilla podemos mostrar un JSON en formato de tabla con el siguiente script:

Obtener las llaves de un arreglo

Dado un arreglo se pueden extraer las llaves o claves de la siguiente forma:

Obtener el elemento seleccionado 

Podemos hacer referencia al elemento HTML seleccionado con el símbolo $0, y poder navegar por el historico de elementos seleccionados con $1, $2,etc

Referenciar objetos HTML 

Tradicionalmente usamos document.getElementById() o querySelector() para hacer referencia a objetos. En la consola de Chrome podemos hacer referencia usando la simbología de $('selector'), muy parecido a como se hace con jQuery, pero esta es una forma nativa de hacerlo en la consola de Chrome.

Obtener eventos configurados en elemento HTML

Se pueden ver de forma sencilla los eventos configurados en un elemento HTML así:

Monitorear todos los eventos sobre un elemento HTML

Se pueden monitorear todos los eventos sobre un elemento específico, usando dos comandos: monitorEvents() y unmonitorEvents()

Medir tiempo de ejecución de un procedimiento

Puedes calcular el tiempo que tarda un procedimiento en ejecutarse usando dos funciones: console.time() y console.timeEnd()

Mostrar todas las propiedades de un elemento HTML

Usando la función dir(selector) se puede mostrar todo lo que contiene un elemento HTML

Hacer referencia a la última expresión resultante

La última expresión en la consola también puede asignarse a una variable $_ la cual siempre tendrá el valor más reciente calculado dentro de la misma.