Cómo mostrar datos como una tabla en Browser Console

La consola es una herramienta integrada en el navegador que registra los errores que ocurren en los sitios web. Si hay algún error, como enlaces rotos, funciones de JavaScript incompletas o propiedades CSS desconocidas, el navegador mostrará mensajes de error en la consola.

También puede interactuar con la consola a través del shell y la API de la consola, lo cual es útil para probar ciertas funciones y datos de salida. Aquí, el artículo le mostrará un consejo útil para utilizar la API de la consola.

Acceda a la consola en el navegador

En Chrome, puede seleccionar Ver > Desarrollador > Consola JavaScript para mostrar la Consola. Además, también puedes utilizar el método abreviado de teclado: Cmd+ Option+ Jen OS X y Ctrl+ Shift+ Jen Windows.

A continuación se muestra una consola Chrome sin errores.

Desde aquí, puede comenzar a utilizar los comandos proporcionados en la API de la consola.

Interactuar con la consola

Puede interactuar con la Consola de su navegador a través de la propia Consola y agregando JavaScript. Por ejemplo, aquí le pedimos a la consola que muestre el resultado "¡Buenos días!" escribiendo el comando console.log() directamente en la consola:

Como se mencionó, también puedes aplicar console.log(). Console.log() se puede utilizar para probar una declaración condicional de JavaScript. Puedes ver más claramente cuando el resultado devuelve verdadero o falso (verdadero o falso) con la ayuda de console.log().

Aquí hay un ejemplo:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

El código anterior devolverá verdadero, porque una variable contiene el número 1 . En la Consola, verá que el navegador genera el texto con el contenido "verdadero".

Datos de salida en forma de tabla

A veces, tendrás que procesar una serie de datos o una lista de Objetos, como se muestra a continuación:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

Estos datos serán difíciles de leer cuando usemos el método console.log(). El método console.log() mostrará la matriz en una vista de árbol plegable, como se muestra a continuación.

Cuando tenga que lidiar con una matriz de este tipo, usar console.table() es una mejor manera de generar datos. Este método muestra los datos en formato de tabla. Tomando los mismos datos que arriba, el resultado será el siguiente:

La consola del navegador ayuda a los desarrolladores web a manejar los errores en los sitios web. Los usuarios también pueden usarlo para examinar la salida de datos, como con el método console.log(). Cuando tiene una matriz de datos, el comando console.table() es más útil porque muestra la matriz en un formato de tabla fácil de leer. Tenga en cuenta que console.table() solo se aplica en navegadores basados ​​en Webkit como Chrome, Safari y la última versión de Opera.

Espero que tengas éxito.