Las herramientas de desarrollo de los navegadores cada vez son más potentes y van mejorando día a día. El primer gran debugger de JavaScript fue Firebug para Firefox, que hace unos 4 o 5 años no tenía ni la más mínima competencia, pero actualmente tenemos las herramientas de desarrollo de Chrome y las de Internet Explorer (que han mejorado mucho en su versión número 11) como buena y completa competencia.

Las APIs de la consola han evolucionado y encontramos cosas tan interesantes como tablas de datos en la consola, algo que ayuda mucho a visualizar, sobre todo, respuestas por parte de un servidor.

Funciones básicas

Desde hace tiempo la API básica que incorporan casi todas las herramientas de desarrollo de los navegadores permitía lanzar nuevos avisos de distintos tipos. Estas utilidades son esenciales cuando queremos depurar ciertas partes del código de una forma no intrusiva o monitorizar ciertos parámetros, aunque hay quien prefiere las alertas (alert()), que tienen la ventaja de parar la ejecución.

Los avisos básicos que se le puede mandar a una consola de depuración (y soportan casi todas las herramientas de debugging) son básicamente tres: el de registro o log, el de aviso y el de error. La función para crear un registro o una alerta son más o menos similares, pero la función de enviar un error hace un seguimiento de como se ha llegado hasta el propio error, como veremos a continuación.

A la API de la consola se accede a través de console, que alberga distintos métodos para crear estas alertas (log(), warn() y error()). Estos métodos nos permiten enviarle texto o cualquier tipo de variable (ya sea un número, un objeto JSON, una función, un elemento del DOM…) y así poder visualizar cómodamente los datos extraídos del documento.

Para probar los ejemplos debes de abrir la consola de depuración (normalmente pulsando F12).

Mandar un log con un texto básico:

// Texto console.log("Texto de prueba")

Mandando un log con un objeto del DOM:

// Objeto DOM console.log(this)

Mandamos un log con texto y un objeto:

// Texto y objetos console.log("Objeto de prueba:", {a:1, b:2, n:[1, 2, 3]})

Por último, para completar las acciones básicas limpiaremos la consola con console.clear():

// Limpiar consola console.clear()

Funciona igual de igual forma los tres tipos de avisos, por lo que solo voy a poner un solo ejemplo más de cada uno para ver la diferencia:

Tablas en consola

Recientemente se ha implementado en las principales herramientas de depuración (para ser exacto en Firebug y las de Chrome) la función de generar tablas a partir de un objeto o arrays bidimensionales, que nos facilita la visión de datos que se han podido generar o recibir.

La imagen de arriba la genera la consola al usar console.table() enviando un objeto que perfectamente podríamos recibir desde un servidor:

var WeblogsSL = [ {nombre: "Xataka", visitas: 300000, color: "Verde"}, {nombre: "Applesfera", visitas: 200000, color: "Gris"}, {nombre: "Genbeta", visitas: 220000, color: "Azul"} ];   console.table(WeblogsSL);

Al igual que antes, podemos hacer lo mismo con un array bidimensional, que podría contener los datos de una gráfica, por poner un ejemplo:

var grafica = [ [1048, 1083, 1127, 1154, 1215], [952, 977, 1109, 1063, 1054], [944, 944, 1008, 1073, 1073], [34, 40, 51, 56, 61], [1191, 1258, 1290, 1368, 1402], [542, 543, 571, 606, 630] ];   console.table(grafica);

Sabiendo usar estas funcionalidades de la API de la consola nos será mucho más fácil depurar. Seguir leyendo Depurando de forma avanzada JavaScript con las herramientas de desarrollo →