Google Chrome console.log() 與對象和數組不一致

Question

我今天正在幫助一位同事調試一些代碼，我注意到谷歌瀏覽器中的console.log()有一個奇怪的行為：

看來，如果你：

1. 創建一個嵌套數組（例如，[[345,"test"]]）

2. 使用console.log()將數組記錄到控制台。

3. 修改內部數組值之一，然后console.log()將輸出后面的值——而不是執行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"]

JSFiddle 示例

這種行為在 Firefox 中不會發生。

還要注意的是，如果我在 Chrome 調試器中逐行瀏覽他的代碼，那么console.log()將輸出正確的值。

這種奇怪的現象是否有解釋，或者只是谷歌瀏覽器的錯誤？

編輯：

我縮小了重現不一致console.log()行為的步驟：

如果您將此腳本添加到您的頁面：

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

並在 Chrome控制台窗口已經打開的新窗口中打開它，那么console.log()輸出將與在控制台窗口關閉的情況下加載頁面不同。 這是一個 JSFiddle，它演示了.

在第一種情況下，控制台窗口已經打開， console.log()將輸出數組的當前值（即兩個項目）。

在第二種情況下，控制台窗口最初關閉並僅在頁面加載后打開， console.log()將輸出數組的后console.log() （即三個項目）。

這是 Google Chrome 的console.log()功能中的錯誤嗎？

Answer 1

經過大量挖掘，我發現這已被報告為一個錯誤，已在 Webkit 中修復，但顯然尚未拉入谷歌瀏覽器。

據我所知，這個問題最初是在這里報告的： https : //bugs.webkit.org/show_bug.cgi?id=35801 ：

描述來自米奇克萊默 2010-03-05 11:37:45 PST

1) 創建一個具有一個或多個屬性的對象字面量

2）console.log 該對象但保持關閉（不要在控制台中展開它）

3) 將屬性之一更改為新值

現在打開那個console.log，你會看到由於某種原因它有新的值，即使它的值在它生成的時候是不同的。

我應該指出，如果您打開它，如果不清楚，它將保留正確的值。

Chromium 開發人員的回應：

評論 #2 來自 Pavel Feldman 2010-03-09 06:33:36 PST

我認為我們永遠不會解決這個問題。 我們不能在將對象轉儲到控制台時克隆它，我們也不能監聽對象屬性的變化以使其始終真實。

我們應該確保現有的行為是預期的。

一個修復程序是兩年半后實施了2012年8月9日進行的Webkit（ http://trac.webkit.org/changeset/125174 ），但它似乎沒有我們已經進入Chrome瀏覽器呢。

截至今天，將對象（數組）轉儲到控制台將導致在控制台對象擴展（即懶惰）時讀取對象的屬性。 這意味着在改變它的同時轉儲相同的對象將很難使用控制台進行調試。

此更改在記錄對象/數組時開始為它們生成簡短的預覽，並將此信息傳遞到前端。 這僅在前端已經打開時發生，它僅適用於 console.log()，不適用於實時控制台交互。

Answer 2

我找到了此錯誤/功能的解決方法。

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

編輯：不幸的是，這不適用於非原始值，如函數。 在此處使用另一個克隆實用程序。

jQuery 示例：

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