Depurando de forma avanzada JavaScript con las herramientas de desarrollo

Comentarios 11 Me gusta 0 Las herramientas de desarrollo de los navegadores cada vez son ms potentes y van mejorando da a da. El primer gran debugger de JavaScript fue Firebug para Firefox, que hace unos 4 o 5 aos no tena ni la ms mnima competencia, pero actualmente tenemos las herramientas de desarrollo deChrome y las de Internet Explorer (que han mejorado mucho en su versin nmero 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 bsicas
Desde hace tiempo la API bsica que incorporan casi todas las herramientas de desarrollo de los navegadores permita lanzar nuevos avisos de distintos tipos. Estas utilidades son esenciales cuando queremos depurar ciertas partes del cdigo de una

forma no intrusiva o monitorizar ciertos parmetros, aunque hay quien prefiere las alertas (alert()), que tienen la ventaja de parar la ejecucin. Los avisos bsicos que se le puede mandar a una consola de depuracin (y soportan casi todas las herramientas de debugging) son bsicamente tres: el de registro o log, el de aviso y el de error. La funcin para crear un registro o una alerta son ms o menos similares, pero la funcin de enviar un error hace un seguimiento de como se ha llegado hasta el propio error, como veremos a continuacin. A la API de la consola se accede a travs de console, que alberga distintos mtodos para crear estas alertas (log(), warn() y error()). Estos mtodos nos permiten enviarle texto o cualquier tipo de variable (ya sea un nmero, un objeto JSON, una funcin, un elemento del DOM) y as poder visualizar cmodamente los datos extrados del documento. Para probar los ejemplos debes de abrir la consola de depuracin (normalmente pulsando F12). Mandar un log con un texto bsico:
// 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 bsicas 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 ms de cada uno para ver la diferencia:

Tablas en consola
Recientemente se ha implementado en las principales herramientas de depuracin (para ser exacto enFirebug y las de Chrome) la funcin de generar tablas a partir de un objeto o arrays bidimensionales, que nos facilita la visin 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 podramos 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 podra contener los datos de una grfica, 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 ms fcil depurar. Va | Xitrus