unijimpe

Tradicionalmente para depurar Javascript se hace uso de la función alert con la cual muestra un texto que contiene el valor de una determinada variable. Pero este método tiene un inconveniente: detiene la ejecución del script hasta que el usuario acepte esta alerta.

Javascript Console

Safari y Firefox con Firebug instalado ofrecen un comando para facilitar la depuración de Javascript, se trata de console el cual imprime el mensaje en el panel de console como se muestra en la imagen que acompaña este artículo.

Existen varios tipos de mensajes que se pueden mostrar:

• console.log() muestra un mensaje en la consola.
• console.debug() muestra un mensaje y ademas nuestra el número de línea donde se encuentra.
• console.warn() muestra un mensaje de alerta con un icono y fondo amarillo para identificarlo.
• console.error() muestra un mensaje de error con un icono y fondo en color rojo.

Para mostrar un mensaje se le pasa la cadena de texto que deseamos imprimir:

console.log("-> log");
console.debug('-> debug');
console.warn('-> warm');
console.error('-> error');

También se pueden pasar mas parámetros al estilo de printf y sprintf de PHP, por ejemplo:

var total = 12;
var consulta  = "Google";
console.log("Total: %s para '%s'", total, consulta);
// Total: 12 para 'Google'

Utilizando console.log() en otros Navegadores

Ya que console solo esta disponible para Safari y Firefox con Firebug, si pruebas tu desarrollo en Internet Explorer u Opera te generará un error puesta la sentencia console.log() no existe. Para ello se ha propuesto en KeeKim un script para reemplazarlo por opera.portError() en el caso de Opera y alert() en el caso de Internet Explorer.

if (!window.console) {
  var log = window.opera ? window.opera.postError : alert;
  window.console = { log: function(str) { log(str) } };
}

Más Información

• Firebug: Console API
• Firebug and Logging
• Cross-browser Console Logging
• Logging Information to the Firebug JavaScript Console

Posts Relacionados

• Depurar Flash con Firebug
• Optimiza JavaScript con Closure Tools
• Firebug Lite
• Acortar URLs con PHP y Goo.gl
• Charles Web Debugging Proxy