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

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Front-endSupongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser «verde», o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase «rojo», a éstos se la retira con removeClass y luego le añade la clase «verde» usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

  • Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
  • Cómo quitar clases
  • Cómo añadir clases
  • Cómo alternar clases
  • Cómo comprobar si un elemento tiene aplicada o no una determinada clase
  • Cómo dar soporte a navegadores muy antiguos