Cómo mostrar datos como tabla en la consola del navegador

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

Además de eso, también podemos interactuar con la consola a través del shell y la API de la consola, que resulta útil al probar ciertas funciones y datos de salida. Aquí, le mostraremos un consejo útil para el uso de la API de consola.

Accediendo a la consola del navegador

En Chrome, podemos seleccionar el menú Ver> Desarrollador> Consola de JavaScript para que aparezca la consola. Alternativamente, también podemos usar la tecla de atajo: Cmd + Opción + J en OS X, y Ctrl + Shift + J en Windows.

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

Desde aquí, podemos comenzar a usar el comando proporcionado en Console API.

Interactuando con la consola

Podemos interactuar con la consola del navegador a través de la consola misma y al agregar JavaScript dentro del documento. Como ejemplo, aquí le decimos a la consola que muestre "¡Buenos días!" console.log() comando console.log() directamente en la consola:

Como se mencionó, también podemos aplicar console.log() dentro del documento. Un uso práctico de console.log() es probar una sentencia condicional de JavaScript. Podemos ver más claramente si el resultado devuelve true o false con la ayuda de console.log() .

A continuación hay un ejemplo:

 var a = 1; if (a == 1) {console.log ('verdadero'); } else {console.log ('false'); } 

El código anterior devolverá verdadero, ya que la variable a contiene el número 1 . En la consola, debería ver que el navegador muestra el texto true .

Datos de salida como una tabla

A veces, estaríamos lidiando con una matriz de datos o una lista de objetos, como se muestra a continuación:

 var data = [{name: "Andi", edad: "21", ciudad: "Tuban"}, {nombre: "Ani", edad: "25", ciudad: "Trenggalek"}, {nombre: "Adi", edad: "30", ciudad: "Kediri"}]; console.table (datos); 

Esta información será difícil de leer cuando usemos el método console.log() . El método console.log() mostrará la matriz en una vista de árbol contraíble, como se muestra a continuación.

Cuando se trata de una matriz de ese tipo, el uso de console.table() es la mejor forma de generarlo. Este método mostrará los datos en un formato de tabla. Tomando los mismos datos que arriba, saldrá como:

Conclusión

La consola del navegador ayuda a los desarrolladores web a manejar los errores en los sitios web. También podemos usarlo para probar la salida de datos, como con el método console.log() . Cuando tenemos una matriz de datos, el comando console.table() sería más útil, ya que muestra la matriz en un formato de tabla que es fácil de leer. Tenga en cuenta que console.table() solo es aplicable en los navegadores basados ​​en Webk como Chrome, Safari y la última versión de Opera.

Otras lecturas

• Matriz de JavaScript básica
• Fragmento de API de consola para texto sublime

Cómo crear un datalista que se pueda buscar al instante

Las listas desplegables son una manera ordenada de proporcionar opciones para un campo de entrada, particularmente cuando la lista de opciones disponibles es larga. Un usuario puede elegir la opción que desea escribiendo en el campo, o mirar a través de las opciones que pueden coincidir con lo que está buscando. S

(Consejos de tecnología y diseño)

Cómo ver cada foto a alguien le gustó en Facebook

Seamos honestos, si usa Facebook, probablemente lo use para acechar o espiar a sus amigos, su ídolo favorito, su enamoramiento (ejem, lo sabemos), su ex, su jefe, etc. Si tiene una gran lista de amigos, puede ser difícil hacer un seguimiento de lo que todos los demás han estado haciendo hasta ahora. E

(Consejos de tecnología y diseño)