javascript - para - Incongruencia de Google Chrome console.log() con objetos y matrices

depurar javascript chrome

Question

Estaba ayudando a un colega a depurar algunos códigos hoy y noté un comportamiento extraño con console.log() en Google Chrome:

Parece que si usted:

1. Crear una matriz anidada (por ejemplo, [[345, "prueba"]])

2. Registre la matriz en la consola con console.log() .

3. Modifique uno de los valores de la matriz interna, luego console.log() mostrará el valor posterior, no los valores de la matriz en el momento en que se ejecutó console.log() .

JavaScript :

var test = [[2345235345,"test"]]
console.log(test);
test[0][0] = 1111111;
// outputs: [[1111111,"test"]]
var testb = {};
testb.test = "test";
console.log(testb);
testb.test = "sdfgsdfg";
// outputs: {"testb":"test"}
var testc = ["test","test2"];
console.log(testc);
testc[0] = "sdxfsdf";
// outputs: ["test","test2"]

Ejemplo JSFiddle

Este comportamiento no ocurre en Firefox.

Además, para tener en cuenta, si paso por su código línea por línea en el depurador de Chrome, entonces console.log() los valores correctos.

¿Hay alguna explicación para este extraño fenómeno o es solo un error con Google Chrome?

EDITAR:

He reducido los pasos para reproducir el comportamiento inconsistente de console.log() :

Si agrega esta secuencia de comandos a su página:

var greetings=[''hi'',''bye''];
console.log(greetings);
setTimeout(function(){
greetings.push(''goodbye'');
},3000);

y abrirlo en una nueva ventana con la ventana de la consola de Chrome ya abierta , entonces la salida de console.log() será diferente que si carga la página con la ventana de la consola cerrada . Aquí hay un JSFiddle que demuestra eso .

En el primer caso, con la ventana de la consola ya abierta, console.log() generará el valor actual de la matriz (es decir, dos elementos).

En el segundo caso, con la ventana de la consola inicialmente cerrada y abierta solo después de que se carga la página, console.log() generará los últimos valores de la matriz (es decir, tres elementos).

¿Es esto un error en la funcionalidad console.log() Google Chrome?

Answer 1

Después de muchas excavaciones, descubrí que esto se ha informado como un error, corregido en Webkit, pero que aparentemente aún no se ha incorporado a Google Chrome.

Por lo que puedo decir, el problema se informó originalmente aquí: https://bugs.webkit.org/show_bug.cgi?id=35801 :

Descripción de mitch kramer 2010-03-05 11:37:45 PST

1) crear un objeto literal con una o más propiedades

2) console.log ese objeto pero déjalo cerrado (no lo expandas en la consola)

3) cambiar una de las propiedades a un nuevo valor

ahora abra ese console.log y verá que tiene el nuevo valor por algún motivo, aunque su valor era diferente en el momento en que se generó.

Debo señalar que si lo abres, conservará el valor correcto si no está claro.

Respuesta de un desarrollador de Chromium:

Comentario n.º 2 de Pavel Feldman 2010-03-09 06:33:36 PST

No creo que vayamos a arreglar este. No podemos clonar el objeto al volcarlo en la consola y tampoco podemos escuchar los cambios de las propiedades del objeto para que siempre sea real.

Sin embargo, debemos asegurarnos de que se espera el comportamiento existente.

Se implementó una solución dos años y medio después el 9 de agosto de 2012 para Webkit ( http://trac.webkit.org/changeset/125174 ), pero parece que todavía no ha llegado a Chrome.

A partir de hoy, volcar un objeto (matriz) en la consola dará como resultado que las propiedades de los objetos se lean al expandirse el objeto de la consola (es decir, de forma perezosa). Esto significa que volcar el mismo objeto durante la mutación será difícil de depurar usando la consola.

Este cambio comienza a generar vistas previas abreviadas para objetos / matrices en el momento de su registro y pasa esta información a lo largo del front-end. Esto solo ocurre cuando el front-end ya está abierto, solo funciona para console.log (), no para la interacción de consola en vivo.

Answer 2

Encontré una solución para este error / función.

console.log(JSON.parse(JSON.stringify(myObject)));

Editar: Desafortunadamente, esto no funcionará para valores no primitivos como funciones. Usa otra utilidad de clonación aquí.

Ejemplo de jQuery:

console.log($.extend({}, myObject));