为何console.log打印后内容会随引用对象变动？前端调试疑问

console.log 打印引用类型数据（对象、数组等）时确实会跟随对象后续的修改而变化，这是浏览器开发者工具的刻意设计。

具体原理 #

浏览器控制台输出引用类型数据时，存储和展示的是对象的内存引用，而非打印执行那一刻的对象快照。只有当你点击控制台的展开按钮查看对象属性时，浏览器才会实时读取该引用指向的内存中最新的属性值。
你遇到的现象完全符合这个逻辑：response.data[0]是引用类型，AgGrid编辑操作会直接修改这个对象的属性，只要编辑发生在你展开控制台打印的对象之前，展示的就是编辑后的值；如果两次打印的对象分别在修改前、修改后展开，就会出现两次打印结果不一致的情况。

这种设计的本质是性能权衡：如果每次打印对象都生成一份独立的深拷贝快照，会占用大量内存，尤其在频繁打印大对象的场景下会严重影响性能。

调试规避方案 #

如果需要固定打印时刻的对象状态，可使用以下方法：

• 打印具体的基础类型字段而非整个对象：基础类型会直接输出快照，不受后续修改影响，比如 console.log(response.data[0].编辑字段1, response.data[0].编辑字段2)
• 打印对象的深拷贝结果：
  • 普通对象可以用 console.log(JSON.parse(JSON.stringify(response.data[0])))
  • 包含特殊类型（Date、二进制数据等）的对象可以用浏览器原生深拷贝API console.log(structuredClone(response.data[0]))
• 使用debugger断点调试：代码执行到断点时会暂停，此时在调试面板查看的对象状态就是断点处的实时状态，不会受后续修改影响

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