Depurar Javascript, Uso De La Consola Y Otras Cosas Chulas

Depurar Javascript, uso de la consola y otras cosas chulas

Un gran poder conlleva una gran responsabilidad, o eso decía el Tío Ben antes de quedarse pajarico en los brazos de Spiderman. Y así es, si tenemos la posibilidad de utilizar una herramienta muy poderosa será mejor que sepamos manejarla al 100%, conocer todas las posibilidades que nos ofrece y así poder hacer uso de todo su potencial, eso es tener una gran responsabilidad. Hoy hablo de frikis, de desarrollo y de la consola de Javascript.

Te pegas media vida desarrollando con Javascript, para cualquier cosa, eso es así,ya sea desde un mínimo efecto jQuery hasta desarrollar buenas practicas MVC con Backbone o Angular. Puedes estar especializado en PHP, Ruby o en Gromenagüer, pero lo que está claro que en algún momento vas a tocar JavaScript así que qué mejor que saber depurar bien mediante el uso de chivatos, no es la manera mas guay ni profesional, Chrome te permite ir poniendo puntos de ruptura y tal pero para iniciarnos en el proceso de depurar javascript no está mal…

Depurar Javascript, conociendo el objeto console

Seguramente lo has utilizado millones de veces, pero te habrá pasado como a mi, te has quedado en el típico console.log y ya está. La verdad es que es muy cómodo, pero este objeto tiene muchísimas opciones más como por ejemplo los distintos niveles de log que podemos utilizar.

<script type="text/javascript">
    console.log("Un gran poder conlleva una gran responsabilidad");
    console.info("Luke, yo soy tu padre");
    console.warn("Soy Batman");
    console.error("El condensador de fluzo no funciona");
    console.debug("Tarzán y su puta madre buscan piso en Alcobendas");
</script>
Diferentes niveles de console

Diferentes niveles de console

Cada uno de estos niveles de log, realmente hacen lo mismo, imprimen texto por la consola, pero si nos acostumbramos a organizarnos y a utilizarlos correctamente podemos llegar a ser mas productivos, por ejemplo, no tienen ningún sentido que pongamos un console.debug en un Try-Catch, en este caso habría que poner un console.error siempre y cuando no se haya capturado la excepción y la ejecución del programa hubiese entrado en un punto crítico de interrupción.

<script type="text/javascript">
function funcionDePrueba() {
    var message = document.getElementById("message");
    message.innerHTML = "";
    var x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "vacío";
        if(isNaN(x)) throw "no es un número";
        x = Number(x);
        if(x &lt; 5) throw "muy bajo";
        if(x &gt; 10) throw "muy alto";
    }catch(err) {
        message.innerHTML = "Input es: " + err;
        console.error("Pues hay algo que ha fallado y tal...");
    }
}
</script>

Ademas,  organizándonos, podemos ver los diferentes niveles de log en las pestañas de depuración de la console de Chrome, todo organizadito, así si que mola depurar Javascript 🙂

Dándole formato a la salida

Esto me recuerda mucho a las máscaras de formato de C pero en cierto sentido más limitadito, es Javascript… En este caso podemos utilizar dos máscaras diferentes para depurar javascript. La primera de ellas, %o, nos imprimirá un bloque DOM, por ejemplo:

<script type="text/javascript">
    var elementos = document.getElementsByTagName("p");
    console.log("DOM: %o", elementos);
</script>

Nos dará un resultado como el siguiente, mostrando por pantalla todos los elementos con la etiqueta p que hay en el documento.

Formateador %o

Formateador %o

Si por el contrario, utilizamos el formateador %O, conseguiremos ver por consola el objeto Javascript que queramos depurar.

<script type="text/javascript">
    var siths = {1:"Darth Vader",2:"Darth Maul",3:"Darth Cognus",4:"Kylo Ren"}; 
    console.log("Siths: %O", siths); 
</script>
Formateador %O

Formateador %O

Agrupando que es gerundio

El último poder que debemos conocer de la consola de Javascript, son las agrupaciones, perfecta si queremos iterar sobre cualquier objeto. Para ello, tenemos que conocer tres funciones básicas del objeto console para poder depurar javascript correctamente y son las siguientes:

  • Función group(): Permite definir un bloque de elementos agrupados, si le pasamos un parámetro de tipo texto estaremos dándole nombre a esa agrupación.
  • Función groupCollapsed(): Lo mismo que la anterior, pero la salida en la consola se producirá de forma desplegada, además igual que con la función group(), si le pasamos un parámetro de tipo texto, definiremos un nombre para la agrupación.
  • Función groupEnd(): Esta función necesitamos especificarla cuando queramos cerrar una agrupación de elementos.

Con el siguiente ejemplo vas a ver de forma muy clara el uso de estas tres funciones de agrupación.

<script type="text/javascript">
    console.group("iteracion");
    for(var i=0; i<5; i++){
	    console.log("iteración %i",i);
    }
    console.groupEnd();
    console.groupCollapsed("iteracion colapsada");
    for(var i=0; i<5; i++){
	    console.log("iteración %i",i);
    }
    console.groupEnd();
</script>
Diferentes formas de depurar javascript

Diferentes formas de depurar javascript

Bueno chachos esto es todo como introducción sobre como depurar javascript de manera pro, si os mola el tema, ya prepararé un post sobre las herramientas de depuración que nos ofrece Chrome y mientras tanto si queréis saber mas sobre el objeto console podéis leer un poquito mas en este artículo.

Gorka Muñoz Andrés

Me llamo Gorka Muñoz y soy un desarrollador melómano. Combino a la perfección la búsqueda de nuevos grupos con la pasión por la tecnología. Desde chiquitito me ha gustado la programación, ahora que soy mayor estoy metido en el mundo del SEO sin olvidarme del /Dev.

This Post Has 3 Comments

  1. Pingback: Aprendiendo JavaScript -Trucos en la consola- | Luis Américo Auyadermont Muñoz

  2. Jose

    Hola colega.

    1. Gorka Muñoz Andrés

      Hola

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *