Consola del navegador para JavaScript

Hoy en día, la consola del navegador es una herramienta imprescindible para los programadores web ya que te ayuda a encontrar posibles errores que pueda haber en el código de una página o aplicación.

Directamente, en la consola del navegador también puedes hacer operaciones, crear variables, arreglos, objetos o llamar a funciones definidas previamente que estén permitidas por el lenguaje de programación JavaScript.

Actualmente todos los navegadores incluyen una consola. Para mi gusto la mejor es la que incluye Google Chrome.

Normalmente, puedes acceder a la consola del navegador haciendo clic en el botón derecho del ratón en la ventana del navegador y en el menú que aparece vas a encontrar una opción que dice “Inspeccionar”.

Visualmente la consola del navegador se muestra como lo siguiente:

Por defecto se muestra en la parte de abajo de la página pero tienes la posibilidad de moverlo fácilmente a la izquierda, derecha o posición libre de la pantalla.

La consola del navegador es un excelente lugar para encontrar errores en el código y también es ideal para probar tu código JavaScript.

Tipos de mensajes en la consola del navegador

Un detalle muy útil e importante es la posibilidad de mandar información a la consola desde el código usando el console log:

Source code

console.log('Enviando a la consola');

Obteniendo como resultado:

En este caso, tan solo estoy enviando un texto simple pero, puedes enviar valores de variables para conocer su valor o realizar cualquier operación.

En la misma consola también puedes crear pequeñas rutinas con variables y operaciones para ver resultados.

Esto es ideal para debugar o testear el código.

Existen otro tipo de funciones que puedes utilizar para enviar mensajes desde el código JavaScript y que se pueden filtrar o categorizar según su nivel de gravedad.

Para mostrar mensajes con formato de error en la consola (en color rojo) puedes usar:

Source code

console.error('Ha habido algún error');

En la consola lo verás así:

Para mostrar advertencias puedes usar:

Source code

console.warn('Esto es una advertencia');

En la consola lo verás así:

Para mostrar información adicional sobre un suceso puedes utilizar:

Source code

console.info('Esto es un mensaje informativo');

También puedes utilizar la consola para controlar el tiempo de ejecución de tus scripts y poder optimizarlo mediante el uso de console time.

Puedes agregar lo siguiente a tu código:

Source code

console.time('execute_time');
 
for (let i = 0; i < 100; i++) {
    //código...
}
 
console.timeEnd('execute_time');

El código anterior es muy simple.

Tan solo estoy haciendo un ciclo de 100 veces para simular un proceso o ejecución.

Antes del proceso, estoy llamando a console.time() y justo después del proceso estoy llamando a console.timeEnd().

De esta forma, puedes obtener un resultado como el siguiente en la consola:

Con este mensaje puedes interpretar que tu código ha tardado 0.0087890625 milisegundos en ejecutarse.

Para imprimir los datos de un arreglo en formato tabla quizá también te pueda interesar el uso del console table:

Source code

let numbers = [1,2,3];
 
console.table(numbers);

Puedes tener un resultado como el siguiente en la consola:

El contenido del arreglo lo puedes ver en formato table con la ventaja de ser mucho más fácil de leer.

La consola es muy útil. Se utiliza mucho para desarrollar en JavaScript pero también se puede utilizar para HTML y CSS.

Desde la consola puedes inspeccionar todas las etiquetas de marcado HTML y sus correspondientes estilos CSS donde es posible editarlo en línea para ver los resultados directamente.

Conclusión

Si no tienes instalado Chrome, yo te recomiendo que lo hagas ya que tiene una consola mucho más completa y funcional.

Sé que si eres asiduo a un navegador concreto cuesta un tiempo acostumbrarse al cambio. Yo hace varios años siempre usaba Mozilla Firefox y estaba encantado. Desde hace unos años pasé a utilizar en segundo plano Google Chrome hasta que actualmente solo uso Google Chrome.

Bien es cierto que tengo instalado en mi ordenador otros navegadores como Mozilla Firefox, Internet Explorer o Opera pero, solo los uso para probar el funcionamiento de páginas web y aplicaciones.

Consigue toda la información sobre cómo funciona la consola de Google Chrome desde el siguiente enlace:

https://developers.google.com/web/tools/chrome-devtools/console/?hl=es