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”.

Menú acceso consola navegador

Visualmente la consola del navegador se muestra como lo siguiente:

Consola del navegador Google Chrome

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:

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

Obteniendo como resultado:

Enviando a la consola del navegador un mensaje

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:

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

En la consola lo verás así:

Mostrar errores en la consola del navegador

Para mostrar advertencias puedes usar:

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

En la consola lo verás así:

Mostrar una advertencia en la consola del navegador

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

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:

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:

Mostrar el tiempo de ejecución de un código en la consola del navegador

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:

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

Puedes tener un resultado como el siguiente en la consola:

Mostrar los valores de un array en formato table en la consola del navegador

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.

Modificar el HTML y CSS desde la consola del navegador

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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre