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

10 papás geniales con impresionantes habilidades para hacer vestuario

Si hay una habilidad en la que los papás del mundo se enorgullecen, es que son útiles con las herramientas . Desde arreglar la plomería de la casa hasta construir la tradicional casa en el árbol, es una habilidad que se puede aplicar a cualquier cosa. Incluso se puede decir que la habilidad de un padre con las herramientas realmente brilla cuando se combina con creatividad e innovación.Tome

(Consejos de tecnología y diseño)

Gestionar múltiples borradores fácilmente en Jekyll

A pesar de ser solo un sitio web estático, también podemos utilizar un plugin en Jekyll. Continuemos nuestra discusión sobre la creación de borradores de la publicación anterior. Como puede ver antes, en la publicación anterior, creamos los borradores y los colocamos en una carpeta especial llamada _drafts primero.Luego

(Consejos de tecnología y diseño)