¡Chrome muestra dos versiones diferentes de la variable!

¡Esto también me desconcertaba!

La clave es pasar el cursor del mouse sobre este ícono azul que lo explica.

El mensaje te dice que lo que está impreso ahí (típicamente en cursiva, y antes del icono i azul) es el valor de la variable al momento de imprimir. Por el contrario, cuando hace clic en el icono ▸ , se muestra un nuevo valor a continuación, que puede ser diferente. Puede decir que este es el nuevo valor porque puede tener negrita/coloreado y potencialmente un árbol de más símbolos ▸ .

Solución, si está utilizando console.log para depurar

Para la depuración, desea el valor en el momento de la impresión, de modo que pueda imprimir en varios momentos y ver cómo evoluciona el valor. Por lo tanto, al depurar una variable cuyo valor puede variar en el momento en que haga clic en el icono ">", haga lo siguiente.

En vez de:

 console.log(thing)

Hacer

 console.log(JSON.stringify(thing,null,2))

Esto convierte el elemento en una cadena en el momento de la impresión y no lo actualizará más adelante. (El null y el 2 solo lo ayudan a formatearse bien en la pantalla).

Demostración

Como fragmento en el editor de Stack Overflow, las dos versiones dan esencialmente el mismo resultado.

 let obj1 = {}; obj1.name = "John"; console.log("Simple console log of obj1\n",obj1); console.log("Console log of JSON strinigfied obj1\n",JSON.stringify(obj1,null,2)); let obj2 = {}; console.log("Simple console log of obj2\n",obj2); console.log("Console log of JSON strinigfied obj2\n",JSON.stringify(obj2,null,2)); obj2.name = "John";

Pero en Chrome Console dan salidas diferentes.

Primero, antes de hacer clic en los triángulos.

Luego, después de hacer clic en los triángulos, el registro de la consola simple da el mismo resultado para Obj1 y Obj2.

Pero JSON.stringified hace que Obj1 y Obj2 se vean diferentes, lo que probablemente sea lo que queremos si estamos depurando.

porque en segundo lugar ha configurado obj1.name después de console.log(),

 var obj1 = Object.create(Object.prototype, {}); console.log(obj1); obj1.name = "John";

obtiene una respuesta diferente porque en el segundo ejemplo, el valor se define después de que ya lo haya registrado.

básicamente es lo mismo que esto:

 var foo = "Hello World!"; console.log(foo);

registraría "¡Hola mundo!" a la consola, pero si hicieras esto

 console.log(foo); var foo = "Hello World!";

no registraría nada ya que aún no está definido.