TRUCO: Visualizar datos JavaScript en la consola como tablas de datos

Cuando depuramos código JavaScript estamos acostumbrados a utilizar las facilidades que nos proporciona la consola de los navegadores para mostrar datos de depuración de manera inadvertida para los usuarios.

De este modo, podemos escribir en nuestro código una línea del estilo:

console.log(miObjeto);

que provocará que se escriba en la consola de desarrollo del navegador (pulsa F12 para verla) un resumen del objeto, el cual podemos inspeccionar también si lo deseamos.

Esto está muy bien, la verdad, y es más que suficiente en la mayoría de los casos. Sin embargo, muchas veces nos resultaría mucho más útil disponer de alguna forma de ver de un solo golpe todos los datos de un objeto.

Por ejemplo, si tenemos definido un objeto con esta información:

var o1 = {
    nombre: "Pepe",
    apellidos: "Fernández",
    fechaNacimiento: new Date(1980, 4, 20)
};

y lo mostramos por la consola con el método log habitual, lo que veremos será lo siguiente en Firefox:

Resultado de un console.log en Firefox

y este sería el resultado en Chrome:

Resultado de un console.log en Chrome

y en Edge/Internet Explorer:

Resultado de un console.log en Edge/Internet Explorer

Como vemos en los tres casos podemos ver el objeto sin demasiado problema: simplemente hay que expandir la línea que genera el console.log y podremos ir desplegando sus propiedades para examinarlo.

Esto está muy bien en la mayor parte de los casos. Pero si necesitamos inspeccionar de forma más rápida y de un golpe de vista las propiedades de un objeto, existe una forma mejor de hacerlo, aunque no es muy conocida.

SIGUE LEYENDO para aprender:

  • Cómo podemos mostrar los datos de manera mejor
  • Qué diferencias e inconsistencias existen entre los navegadores
  • Cómo podemos limitar éstas

Detectar la aparición y desaparición de un elemento: evento "inViewport"

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario.

Aparecer-Desaparecer

Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos,  podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

El problema es que no existe ningún evento como este en HTML/JavaScript.

No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta.

En este artículo vamos a desarrollar desde cero la funcionalidad necesaria para conseguir tener un evento como este, listo para utilizar en cualquier página.

La funcionalidad la vamos a dividir en varios pasos individuales que, en conjunto, nos permitirán obtener lo que necesitamos.

SEGUIR LEYENDO para leer el artículo completo y obtener el código.

Cómo obtener una referencia al ámbito global en cualquier entorno JavaScript (HTML, Node.js, Windows Scripting Host…)

El ámbito global de JavaScript es el ámbito superior en el que se definen las variables y que contiene algunas de las funcionalidades globales del entorno de ejecución.

Se trata de un objeto especial que:

  • Siempre está disponible
  • Se llama de manera implícita, es decir, no es necesario mencionar su nombre explícitamente para usar sus métodos o propiedades, al contrario que con cualquier otro objeto.
  • Según indica el estándar ECMAScript, este objeto global no dispone de constructor ni de prototipo y no se puede invocar como una función al igual que el resto de los objetos.

Si en un fragmento de código JavaScript definimos una variable o una función como estas fuera de todo contexto, o sea, para simplificar, sin ser dentro de una función):

var miVar = 0;
function sumar(a, b) {
   return a+b;
}

Lo que estamos haciendo es crear sendos miembros en el objeto global, que es el que constituye dicho ámbito: una variable y una función globales.

Es decir, declarar una variable o una función global implica crear un miembro de este objeto global.

Además, se definen otros ámbitos según en dónde declaremos cada variable, y estos ámbitos se "contienen" unos a otros. Es decir, los ámbitos van en una jerarquía que comienza en el ámbito más restringido y sube hasta llegar al ámbito global. En nuestro ejemplo híper-sencillo tendríamos tan solo dos ámbitos: el global y el de la función:

JavaScript-Ambitos

Desde el ámbito de la función tenemos acceso al ámbito global.

Todo esto de los ámbitos se complica mucho más (tenemos clausuras, por ejemplo). En el estándar podemos leer sobre ello (les llama entornos léxicos) y que nos de vueltas la cabeza.

Como sabemos, aunque nació en los navegadores, JavaScript en la actualidad se utiliza para casi todo, y podemos encontrarlo en casi cualquier entorno imaginable: servidores, dispositivos embebidos, sistemas operativos…

Aunque el estándar ECMAScript describe el objeto global y qué debe contener, no es igual en todos los entornos.

En un navegador el ámbito global lo constituye la ventana en la que se ejecuta el script, y de hecho podemos acceder a él mediante el objeto window. Por ejemplo, a partir del código anterior que definía una variable y una función podríamos escribir:

alert(miVar);
alert(window.miVar);

Y veríamos que son instrucciones equivalentes, ya que al ser una variable global queda definida dentro del ámbito global (es decir, de window en un navegador).

En otros entornos, sin embargo, no disponemos de un objeto window que actúe de ámbito global. Por ejemplo, en Node.js existe un objeto llamado global (o GLOBAL, es un alias) que nos permite acceder al ámbito global. En Windows Scripting Host el objeto global no tiene un nombre definido que lo represente y que nos permita acceder a él directamente… Cada entorno, por tanto, tiene sus particularidades.

La pregunta entonces es: ¿Cómo podemos acceder al ámbito global de JavaScript de manera genérica e independiente del entorno?.

SIGUE LEYENDO para descubrir:

  • Cómo enumerar propiedades de objetos
  • Distintas técnicas de acceso al ámbito global y cuál es la verdaderamente correcta
  • Qué tenemos en el ámbito global ennavegadores, Windows Scripting HOst y NOde.js
  • Por qué en Node.js nos devuelve "cosas extrañas"