Chrome Dev Tools中console.log打印Array展开显示不一致的怪异行为

这个问题我太熟了！刚接触前端调试的时候踩过好几次坑😅。核心原因是Chrome DevTools的console.log采用了惰性求值的策略：

• 当你执行console.log(arr)时，DevTools只会先记录下这个数组的引用，初始显示的(4)[Location, Location, Location, Location]只是当时数组的一个「表面快照」——只告诉你数组的长度和元素类型，不会立刻去读取每个元素的详细内容。
• 等你点击展开箭头的时候，DevTools才会真正去遍历数组、读取每个元素的当前状态。如果在console.log之后，你的代码修改了数组里的元素（比如修改Location对象的属性、替换元素），那展开后看到的就是修改后的结果，自然和初始显示不符。

举个直观的例子，你写的代码可能是这样的：

// 初始化数组
const locations = [new Location(), new Location(), new Location(), new Location()];
// 打印数组
console.log(locations);
// 偷偷修改第一个元素的属性
locations[0].address = "被修改了的地址";

这时候控制台初始显示是4个Location，但展开第一个元素，就会看到address是「被修改了的地址」——因为log的时候只是存了引用，展开才读最新值。

解决办法 #

这里给你几个实用的调试技巧：

• 深拷贝快照：用structuredClone（现代浏览器支持）或者JSON.parse(JSON.stringify(arr))把数组转成一个完全独立的副本再打印，这样log的就是当时的状态，后续修改不会影响：

  console.log(structuredClone(locations));
  // 兼容旧环境用这个：
  console.log(JSON.parse(JSON.stringify(locations)));
  

  注意：JSON方法会丢失函数、Symbol、循环引用这类内容，structuredClone支持更多类型。

• 用console.table直接展示全部内容：如果数组元素是对象，console.table(locations)会把所有元素的属性以表格形式一次性打印出来，不会有惰性展开的问题，一目了然。

• 断点冻结状态：在console.log那一行打个断点，或者在log之后加debugger;语句，让代码执行到这里暂停。这时候你再去查看控制台的数组，展开后就是当时的真实状态，因为代码还没执行到修改元素的部分。

• DevTools小技巧：右键控制台里的数组条目，选择「Store as global variable」，DevTools会把当时的数组引用存成temp1（或类似变量），你可以立刻打印temp1来查看当时的状态（要注意得在修改代码前操作）。

内容的提问来源于stack exchange，提问作者zok