La Guía Definitiva de Consola API

Aunque console empezó como un producto propietario, rápidamente fue evidente el gran beneficio que traía a la hora de debugging. Fue implementado por todos los buscadores web y se creó un estándar.

Hoy en día es una de las herramientas más utilizadas por desarrolladores web. Provee muchas funciones que nos ayudan a ver realmente que está haciendo nuestro código. El método más conocido y utilizado es console.log()

La consola es parte de las herramientas en los buscadores modernos. En la consola de tu buscador preferido podrás encontrar información sobre la página en la que actualmente te encuentras. Por ejemplo, podrás ver errores, y advertencias; además, podrás correr expresiones de JavaScript. Independientemente de cuál sea tu nivel de experiencia con JavaScript, estos métodos pueden ayudarte.

Aunque existe una consola estándar, hay algunas diferencias entre como los buscadores la implementan. Incluso, algunos buscadores tienen métodos que otros no. En este enlace podrás ver la compatibilidad de 13 buscadores populares, incluyendo NodeJS.

Print Debugging

Todos los buscadores modernos tienen un debugger. En un debugger puedes poner breakpoints/puntos donde el código hará una pausa para que puedas examinar las variables en ese momento.

Otra manera popular entre los desarrolladores de JavaScript para hacer debugging es utilizar expresiones del API en la consola para la parte de código que desean examinar. Es rápido y fácil.

Para ver si el valor de una variable cambia, simplemente utiliza una expresión antes y después de cuando esperas que suceda el cambio.

En este ejemplo, utilicé log(), el método más conocido del API. Lo que pongas entre los paréntesis aparecerá en la consola al correr el código. Entre los paréntesis puedes poner strings, variables, e incluso CSS (más adelante hablaré sobre esto)

¿Quién no ha pasado tiempo buscando errores en el código para luego darse cuenta de que simplemente nunca invocó la función? Este método también es utilizado para asegurarse que alguna función realmente sea invocada.

No importa cómo ejecutes este código, si no invocas la función, jamás devolverá I am debugging y jamás verás el mensaje en la consola.

Accede a la consola de tu buscador

• Firefox
  • Desde el menú: Tools -> Web Developer -> Web Console
  • En Mac: cmd + option + k
• Chrome
  • Desde el menú: View -> Developer -> JavaScript Console
  • En Mac: cmd + option + j

Así se ve la consola abierta en Chrome. En este artículo, los ejemplos serán ejecutados en Chrome.

Así se ve la consola abierta en Firefox Developer Edition.

También la puedes poner en la parte inferior, al lado izquierdo o en una ventana separada.

Los Métodos de la API en la Consola

Aunque el método de log() es muy popular y utilizado, los demás métodos que ofrece el API no son tan conocidos. Incluso ingenieros con mucha experiencia se sorprenden al ver todo lo que pueden hacer con la consola.

Para ver todos los métodos disponibles, ejecuta la siguiente línea en la consola de tu buscador preferido:

¡Hay decenas de métodos!

En este artículo hablaré sobre cuatro tipos de métodos que son útiles a la hora de debugging. Los métodos de logging o printing te permiten pasar mensajes a la consola de diferentes maneras, también hay métodos de conteo, de agrupación, y de tiempo. Además, aprenderás a darle estilo a tus mensajes con CSS.

Te aconsejo que trates estos ejemplos en tu buscador y experimentes con lo que aprendas después de leer este artículo.

Logging/Printing

console.log()

Este método recibe uno o varios textos, variables u objetos como parámetros. Los mensajes aparecerán en la consola en el mismo orden listado.

En esta ocasión, utilicé el primer parámetro como etiqueta para el segundo. Así es más fácil encontrar lo que busco entre varios mensajes.

Si el parámetro es una variable, en lugar de ponerle una etiqueta, puedes envolver la variable en corchetes:

Al hacer esto, el mensaje saldrá en la consola como un objeto (pero no muta la variable en tu código) y la propiedad será el nombre de la variable.

Sin embargo, si ejecutas funciones dentro de este método, sí tendrá efecto en tu código. Por ejemplo:

En este ejemplo, utilicé el método de arreglos pop() para remover el último elemento. Para aprender más sobre este método de arreglo y otras maneras de remover elementos, accede a esta lección de egghead.io.

CSS

A veces tenemos muchos mensajes en la consola y se nos hace difícil localizar el que buscamos. Puedes utilizar CSS para resaltar algún mensaje. El primer parámetro debe ser el mensaje que quieres estilizar con %c al principio. El segundo parámetro debe ser un string con todos los atributos de CSS que desees aplicarle al mensaje.

console.warn(), console.info(), console.error()

Estos métodos funcionan como el log(). La única diferencia es que tendrán un color en el fondo y un ícono:

• warn() tendrá un triángulo amarillo con un signo de exclamación y un fondo amarillo.
• info tendrá un símbolo de información, pero no tendrá un color de fondo especial.
• error() tendrá un símbolo de error y un fondo rojo.

Podrás filtrar el tipo de mensajes que quieres ver:

• En Firefox, en la parte superrior de la consola encontraras los botones que te permiten escoger entre Errors, Warnings, Logs, Info y Debug.
• En Chrome, tendrás que escoger utilizando el dropdown de Default Levels.

console.assert()

assert() requiere dos parámetros. El primero debe ser una expresión booleana. El segundo debe ser un mensaje en forma de texto, arreglo, u objeto. Si la expresión resulta ser falsa, el mensaje aparecerá en la consola como un error. Si resulta ser cierta, no verás el mensaje en la consola.

console.assert() aparece como un error:

console.table()

Este método requiere un parámetro que debe ser un objeto o un arreglo. El segundo parámetro es opcional, este parámetro debe ser un arreglo con los nombres que deseas darle a las columnas de la tabla que generará el método. Si deseas omitirlo, las columnas serán etiquetadas con la propiedad correspondiente. Si es un arreglo, las columnas serán “index” y “value”.

La tabla generada por console.table(user) tiene una columna llamada “index” y otra llamada “value”:

Si envolvemos el objeto en corchetes, cada parámetro será una nueva columna.

Un arreglo simple utilizaría el índice de cada elemento como el valor de la columna “index” y el valor del elemento en “value”. Un arreglo de objetos tendría una columna de “index” y las demás columnas serían las propiedades de los objetos. Así se vería:

Conteo

console.count()

Con este método puedes contar cada vez que ha sido invocado. Una manera de utilizarlo es poniéndolo dentro de una función para verificar cuantas veces esa función es invocada. Acepta un parámetro que puede ser texto o un arreglo que servirá de etiqueta para el contador. Si quieres omitir la etiqueta, la consola utilizará “default”.

console.countReset()

Acepta los mismos parámetros que count(). Si utilizas una etiqueta, reiniciará el contador correspondiente. De lo contrario, reiniciará el contador “default”. Si tratas de reiniciar un contador con una etiqueta que no existe, la consola te dará una advertencia.

Agrupación

console.group(), console.groupCollapsed(), console.groupEnd()

Con éstos tres métodos puedes crear grupos de mensajes en la consola. Puedes hacer grupos dentro de otros grupos. Cada uno estará “indentend” de acuerdo con su nivel. También podrás colapsar cada grupo y darle una etiqueta a cada uno. Dentro de cada grupo puedes poner otros métodos e incluso darles estilo con CSS.

Tiempo

console.time(), console.timeEnd(), console.timeLog()

Invocar console.time() comienza un temporizador que acaba al invocar console.timeEnd(). Juntos, se pueden utilizar para medir el tiempo en micro segundos (ms) que toma alguna operación en completar. Al igual que con el método de conteo count(), puedes darle una etiqueta. De lo contrario, utilizará “default”. Para obtener cuánto tiempo ha pasado desde el comienzo sin tener que terminar el temporizador, puedes utilizar console.timeLog(). El resultado total lo verás al completar el temporizador invocando console.timeEnd()

Con estos métodos puedes ser más explícito con tus mensajes a la consola. Utilizar el más apropiado de acuerdo al caso, hará tu proceso más eficiente que sólo utilizar console.log() a través de tu código.

Los métodos que más utilizo son console.log(), console.count() y console.table(). Este último es especialmente útil en React. En React utilizamos muchos arreglos de objetos, por lo que verlos de manera tabulada me ayuda a visualizar la data mejor que solo utilizando console.log().

Conclusión

En resumen, conocer los beneficios de la Console API es una herramienta poderosa para cualquier desarrollador web, especialmente en el proceso de debugging, ya que usar esta herrameinta te permite ser rápido y más eficiente en tu día a día.

Hay docenas de métodos que puedes usar para mejorar tu código y entender realmente este que está haciendo con la ayuda de la Console API. De todos esos métodos hay al menos 4 que son importantes y de uso constante.

• Printing
• Conteo
• Agrupacion
• Tiempo