Depurar Javascript utilizando console.log()

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:

  1. console.log("-> log");
  2. console.debug('-> debug');
  3. console.warn('-> warm');
  4. console.error('-> error');

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

  1. var total = 12;
  2. var consulta  = "Google";
  3. console.log("Total: %s para '%s'", total, consulta);
  4. // 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.

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

Más Información

Comentarios Total 2 comentarios


Daniel
Publicado: 24/10/2014 10:38 am

MUchas gracias, no conocía esas funciones :D,
generalmente ocupo console.log y console.dir

saludos! y muchas gracias

Héctor Estigarribia
Publicado: 05/02/2015 12:51 pm

gracias, me ha servido mucho tu artículo

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)