Chrome调试器异常求助：单步执行与直接运行结果不一致

兄弟，我太懂你踩的这个坑了！你遇到的其实是Chrome控制台一个非常经典的「引用类型懒求值」特性，不是调试器bug，而是它的默认行为导致的：

• 当你用console.log打印数组、对象这类引用类型时，Chrome并不会在执行console.log的瞬间就把它们的内容快照下来，而是只保存一个指向这个数据的引用。只有当你在控制台里点击展开这个log条目时，它才会去读取这个引用当前的最新值。
• 而用F10单步执行的时候，你在console.log执行完、还没修改数组的阶段，可能已经查看了log的内容（或者调试器在单步模式下会自动做即时快照），所以显示的是数组当时的空状态；但直接点击继续的话，代码会一口气执行完，等你再去看log的时候，数组已经被修改了，自然就显示成添加文本后的样子。

解决办法（三种常用方式） #

• 深拷贝快照：把数组转成JSON字符串再转回来，生成一个和原数组完全独立的副本，这样log的就是执行时的状态：

  console.log(JSON.parse(JSON.stringify(你的数组变量)));
  

• 用console.table替代：console.table(你的数组变量)会直接在控制台渲染出数组当前的内容，不会延迟求值，能直观看到执行时的状态。
• 手动快照：在log执行后，右键点击控制台里的log条目，选择「Store as global variable」，Chrome会把当时的状态保存成一个临时变量（比如temp1），之后你随时查看这个变量都是log执行时的样子。

另外你提到直接打印item内容显示正常，是因为item如果是基本类型（比如字符串、数字），console.log会直接保存它的字面量值，不会有懒求值的问题，所以两种调试方式结果一致。

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