La consola Javascript

Para acceder a la consola Javascript del navegador, podemos pulsar CTRL+SHIFT+I sobre la pestaña de la página web en cuestión, lo que nos llevará al Inspector de elementos del navegador. Este inspector es un panel de control general donde podemos ver varios aspectos de la página en la que nos encontramos: su etiquetado HTML, sus estilos CSS, etc...

Concretamente, a nosotros nos interesa una sección particular del inspector de elementos. Para ello, nos moveremos a la pestaña Console y ya nos encontraremos en la consola Javascript de la página.

También se puede utilizar directamente el atajo de teclado CTRL+SHIFT+J, que en algunos navegadores nos lleva directamente a la consola.

En esta consola, podemos escribir funciones o sentencias de Javascript que estarán actuando en la página que se encuentra en la pestaña actual del navegador. De esta forma podremos observar los resultados que nos devuelve en la consola al realizar diferentes acciones. Para ello, vamos a ver algunas bases:

La consola

El clásico primer ejemplo cuando se comienza a programar, es crear un programa que muestre por pantalla un texto, generalmente el texto «Hola Mundo». También podemos realizar, por ejemplo, operaciones numéricas. En la consola Javascript podemos hacer esto de forma muy sencilla:

console.log("Hola Mundo");
console.log(2 + 2);

En la primera línea, veremos que al pulsar enter nos muestra el texto «Hola Mundo». En la segunda línea, sin embargo, procesa la operación y nos devuelve 4. Para mostrar estos textos en la consola Javascript hemos utilizado la función console.log, pero existen varias más:

La idea es utilizar en nuestro código la función que más se adapte a nuestra situación en cada caso (errores graves con console.error(), errores leves con console.warn(), etc...).

Aplicar varios datos

En el ejemplo anterior, solo hemos aportado un dato por cada línea (un texto o una operación numérica), pero console.log() y sus funciones hermanas permiten añadir varios datos en una misma línea, separándolo por comas:

console.log("¡Hola a todos! Observen este número: ", 5 + 18);

De momento nos puede parecer algo inútil, pero cuando empecemos a trabajar con variables y objetos, será muy necesario.

Aplicar estilos en la consola

Aunque no es muy práctico y sólo se trata de puro divertimento, se pueden aplicar estilos CSS en la consola Javascript haciendo uso de %c, que se reemplazará por los estilos indicados:

console.log("%c¡Hola Manz!",
            "background:linear-gradient(#000, #555); color:#fff; padding: 5px 10px;");

Es importante recalcar que cuando escribimos en la consola podemos obviar el console.log() y escribir directamente la información, pero si queremos mostrar algo por consola desde nuestra página web o aplicación Javascript, es absolutamente necesario escribir console.log() (o cualquiera de las funciones de su familia) en nuestro código.