Chrome JavaScript控制台使用 console.dir 輸出物件或陣列,不是得到執行時的值

寫網頁時，常會用瀏覽器開發者工具裡面的 JavaScript 主控台，來看 JavaScript 執行情形。前一陣子，發現一個奇怪情形，在 Chrome 上，JavaScript控制台使用 consolde.dir 輸出物件或陣列的值時，得到的是整個程式執行完、最後的、目前的值，而不是執行時的值。

例如：

var arr = ['a','b'];

// 此時是 ['a','b'] 
console.dir(arr); // 預期輸出['a','b'], 但看到的是 ['a','b','c']
alert(arr); // 正常，輸出 ['a','b']

arr.push('c');
// 此時是 ['a','b','c']
console.dir(arr); // 正常，輸出 ['a','b','c']
alert(arr); // 正常，輸出 ['a','b','c']

一個陣列，一開始裡面有的元素是 a,b，然後新增一個 c 元素，變成 a,b,c。
使用 alert()，得到的值，如預期中，一開始為 a,b，然後是 a,b,c。
但使用 console.dir()，得到的值卻都是  a,b,c。

如下圖，可先注意元素個數，分別是2個，然後變成3個，看起來是正常的。

但展開後，卻都顯示有3個元素。



在 IE11 的主控台測試，沒有此狀況。如下圖。




Chrome 似乎在展開 array 或 物件時，會去讀取 array 或 物件 目前的最新資料。但這實在有點奇怪，因為一般會在某個執行點使用 console.dir()，都是想知道那時的值，而不是最後的值。

解決辦法，使用 JSON.stringify() 將陣列或物件轉成 JSON 字串，當成字串輸出，雖然比較不易閱讀，但至少能在 Chrome 控制台，得到真正執行階段的值。

var arr = ['a','b'];

// 此時是 ['a','b'] 
console.log(JSON.stringify(arr)); // 正常，輸出 ['a','b']

arr.push('c');
// 此時是 ['a','b','c']
console.log(JSON.stringify(arr)); // 正常，輸出 ['a','b','c']