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.

Gulpjs o cómo librarnos de tareas repetitivas

Existe un cierto tópico de que los informáticos somo unos vagos, en cierto sentido no es mentira, pero no es algo exclusivo solo de los informáticos, todos al fin y al cabo somos un poco perezosos y vagos. Tu ponte que te acabas de comprar una estantería de ikea y tienes que montarla, para ello tienes un destornillador y un destornillador eléctrico, ¿me vas a decir que vas a montar todos los tornillos a mano sin utilizar la herramienta eléctrica? Já… tu eres gilipollas… y es que entre hacer una tarea repetitiva durante horas o poder automatizarla mediante herramientas, lo lógico parece ser el hacer uso de esas herramientas y con ese tiempo que has ganado tomarte unas cervecitas y una tapita de aceitunas, aunque claro, de todo hay en los senderos del señor…

Pues eso nos pasa a los informáticos, dentro de nuestra profesión existen tareas que son un auténtico coñazo, a ninguno nos gusta tener que hacer un deploy a mano, borrar caches o minificar hojas de estilo, por eso se han inventado herramientas que nos ayudan a automatizar tareas. Ya hablé en otro artículo de Phing un automatizador de tareas para PHP escrito en XML, pero tenemos herramientas para casi todos los lenguajes y tipo de proyectos, por ejemplo si vienes del mundo de Java tienes Ant, también escrito en XML y si eres demasiado hardcore siempre puedes automatizar tareas escribiendolas en bash.

Pero hoy voy a hablar de Gulpjs, el último hype del momento en el desarrollo front-end.

Gulpjs, ¿harás la colada por mi?

Pues no, de momento Gulpjs no sabe hacer ese tipo de cosas, pero para saber que tareas podemos automatizar lo primero que tenemos que tener presente es la documentación y saber qué es realmente.

Gulpjs es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

Entrando en detalles técnicos, tienes que saber que a diferencia de Gruntjs, Gulpjs no genera archivos temporales a medida que va pasando por cada tarea ya que utiliza streams de Node.js haciendo que sea más rápido que la otra herramienta. Esto significa que, en resumen, Gulpjs solo lee y escribe en disco una sola vez, el resto de procesos los hace directamente en memoria.

Flujo de trabajo de Gulpjs
Flujo de trabajo de Gulpjs

Además otro punto a favor de Gulpjs es que puedes instalar y utilizar módulos de Node.js en tus scripts mientras que con Grunt.js no.

Manos a la obra, instalando Gulpjs

Lo primero que necesitas tener instalado es npm porque como hemos dicho ya, Gulpjs esta construido sobre Node.js. Si todavía no lo tienes tan solo tienes que escribir los siguientes comandos:

sudo apt-get install npm

Ea, ya lo tienes. Ahora lo que tienes que decidir es si quieres instalar Gulpjs de manera global o únicamente en las dependencias de desarrollo de tu proyecto. Si vas por el primer camino, escribe lo siguiente en la terminal.

 sudo npm install --global gulp 

Si por lo contrario, tan solo quieres hacer pruebas en desarrollo y olvidarte de automatizar tareas para volver a la prehistoria, craso error, escribe lo siguiente en tu terminal.

sudo npm install --save-dev gulp

Definiendo nuestro buildfile

En todo archivo de construcción se suelen definir las mismas tareas mas o menos. Estas tareas son el borrado del directorio en el servidor, el borrado de caché de nuestro proyecto, la compilación de less junto con la minificación de archivos javascript y css, el empaquetado del proyecto y el despliegue en el servidor. Esta claro que esto no es algo fijo, sino que cada proyecto tendrá definidas unas u otras.

Por ejemplo, la tarea de borrado del directorio luciría tal que así:

var clean = require('gulp-clean');
var _DESTINATION_DIRECTORY = '/var/www/tu-proyecto';

gulp.task('clean', function () {
 console.log('-----------------------');
 console.log('+      C L E A N      +');
 console.log('-----------------------');
 return gulp.src(_DESTINATION_DIRECTORY, {read: false} )
 .pipe(clean({force: true}));
});

En esta pieza de código de ejemplo podemos ver varias cosas interesantes. Lo primero que se hace es definir la dependencia del módulo gulp-clean en una variable para que podamos usarla en nuestro script.

Para instalar un módulo de Gulpjs tenemos que escribir los siguiente en la terminal.

npm install --save-dev gulp-clean

Para definir una tarea tenemos que hacer uso de la función task en la que le pasamos el nombre que queremos darle y la función que se ejecutará. Ya dentro de la función es cuando podemos empezar a jugar con nuestros ficheros.

Dentro de nuestra tarea, la función gulp.src lo que hace es proveer el origen de ficheros/directorios con los que queremos trabajar y para poder utilizarlos tenemos que utilizar la función pipe. Esto es de lo que hablaba más arriba, pipe es la función que utiliza los streams de Node.js pasando en memoria por cada modificación que se produzca en nuestros ficheros/directorios definidos.

Y para eliminar los directorios que queremos tan solo tenemos que pasarle a la función pipe la ejecución del módulo que hemos instalado junto con las opciones que necesitemos o no.

Por supuesto esto es una primera aproximación a los ficheros de deploy hechos con Gulpjs pero a poco que hayas trabajado con Javascript seguro que serás capaz de construir tareas mas complejas.

Voy a dejar el link a los módulos disponibles para que le eches un vistazo y un script completo con tareas básicas para hacer un despliegue en local pensado para proyectos Symfony para que puedas echarle un vistazo y utilizarlo como base para tus proyectos, pero a cambio te pido un Me gusta de Feisbúh, un +1 de Google o lo publiques en tu Twittah para que se distribuya más rápidamente por la comunidad.

[sociallocker id=446]
Gulpjs buildfile
[/sociallocker]

¡Hasta que volvamos a olernos!

descarga