Depurando Javascript en la Consola del navegador

Vamos con una serie de artículos explicando algunas técnicas que nos serán útiles a la hora de trabajar con lenguajes de lado Cliente, principalmente Javascript.
En éste artículo voy a cubrir algunas técnicas de depuración con Firebug de Firefox; más adelante veremos las características especiales del Inspector de Google Chrome/Chromium y Opera Dragonfly. Con Explorer también se puede, pero no pienso dedicarle un artículo teniendo en cuenta que casi ninguno de mis lectores tiene tan mal gusto o es tan masoquista como para usarlo .

Los ejemplos que enseñaré funcionan casi Estándar en cualquier inspeccionador.

Comunicación con la Consola Javascript:

• Logueo/Envío de variables a la consola:
  Podemos enviar variables a la consola usando las función console.log(), console.debug() también sirve.
  Por ejemplo, si tenemos un Objecto y queremos imprimirlo por pantalla, no lo podemos mostrar con  document.write() o window.alert() porque nos imprimirá algo como “[object Window]“.
  Usando la consola, escribimos console.log(window) y obtendremos algo como esto:
   
  Donde se muestra el objeto Window con su propiedad location.href, si haces Click sobre él, se abrirá la pestaña DOM mostrando todas las características del Objeto, sus métodos y propiedades con valor.
• Logueo de Errors/Warnings/Infos por Consola:
  Puede resultar muy útil hacer logueos especiales por la consola de Firebug.
  Supongamos el siguiente código:
  

  var numero = window.prompt("Ingrese un número entre 1 y 3");
  
  if(numero){//Si se ha ingresado un numero
      //Ahora condicionamos el loggeo a mostrar
  	switch(numero){
  		case "1":{
  			console.debug("Valor 1 en Debug");
  			break;
  		}
  		case "2":{
  			console.warn("Valor 2 en Warning");
  			break;
  		}
  		case "3":{
  			console.info("Valor 3 en Info");
  			break;
  		}
  		default:{
  			console.error("Fuera de Rango o NAN");
  			break;
  		}
  	}
  
  }else{//Mostramos un error pues no se ha ingresado un valor
  	console.error("No se ha ingresado un número");
  }
  

  Este código lo que hace es solicitarle al usuario un número y mostrará un mensaje en la consola diferente dependiendo del número que se ingrese.
  Nótese que hago uso de los métodos Error, Warn, Debug e Info del Objeto Console.
  Para que sea “divertido” te recomiendo que pruebes tú mismo el Script, preferiblemente en Firefox con Firebug, pues Chrome/Chromium no diferencian el método Info y Opera DragonFly sólo reconoce el Log/Debug.

  Como puedes ver, es mucho mejor depurar variables por la consola, pues muestra más detalle sobre ésta, además de los condicionales  mensajes que podemos imprimir.
  Para terminar ésta primera parte vamos a ver el caso hipotético de que estemos tratando de ejecutar un scripts que llame al Objeto Console en navegadores que no lo tengan disponible/habilitado, en éste caso, el navegador tirará un error Javascript que detendrá el resto de la ejecución. Para evitar ésto, deberemos hacer uso del siempre útil try…catch:

  try{
  //Funciones que invoquen a la consola
  }catch(e){}//Capturamos el error pero no hacemos nada con él
  

  Ya veremos algunas otras cosas interesantes en los próximos artículos. De momento, por favor, deja de depurar con window.alert

Advertisement