Chrome中console.log打印含对象数组异常，求替代JSON.stringify的调试方法

针对你遇到的浏览器控制台延迟求值导致数组打印展开后显示修改后状态的问题，除了JSON.stringify，以下是几个更易读的实用调试技巧：

1. 创建数组的浅拷贝快照 #

利用展开语法或Object.assign生成原数组的浅拷贝，打印这个拷贝而非原数组，后续对原数组的修改不会影响已打印的内容：

let array = [{ fruit: "banana" }];
console.log([...array]); // 打印浅拷贝的数组
array.push({ fruit: "apple" });
console.log([...array]);

• 适用场景：数组内对象层级较浅，无需深拷贝的情况
• 优点：语法简洁，性能开销小
• 缺点：若数组包含嵌套对象，嵌套对象仍为引用类型，后续修改嵌套对象会影响打印结果

2. 使用console.table()格式化输出 #

console.table()会将数组对象以表格形式展示，清晰呈现每个元素的属性，且打印的是当前状态的快照：

let array = [{ fruit: "banana" }];
console.table(array);
array.push({ fruit: "apple" });
console.table(array);

还可以指定要显示的属性列，聚焦关键信息：

console.table(array, ['fruit']);

• 适用场景：需要快速对比数组中多个对象属性的情况
• 优点：可视化程度高，信息一目了然
• 缺点：超大型数组或属性极多的对象会导致表格拥挤

3. 生成深拷贝快照（针对嵌套对象） #

如果数组包含多层嵌套对象，使用structuredClone()创建原数组的深拷贝，确保打印的是完全独立的快照：

let array = [{ fruit: "banana", info: { color: "yellow" } }];
console.log(structuredClone(array));
array[0].info.color = "brown";
array.push({ fruit: "apple" });
console.log(structuredClone(array));

• 适用场景：处理包含嵌套对象、数组的复杂数据结构
• 优点：完全隔离原数据，后续任何修改都不会影响打印结果
• 缺点：超大或循环引用的数据结构可能无法被structuredClone处理

4. 临时冻结数组（阻止后续修改） #

在打印数组后立即冻结它，确保后续代码无法修改数组，展开控制台时看到的就是打印时的状态：

let array = [{ fruit: "banana" }];
console.log(array);
Object.freeze(array); // 冻结数组，后续无法添加/修改元素
array.push({ fruit: "apple" }); // 非严格模式下静默失败，严格模式抛出错误
console.log(array);

若不想影响后续代码逻辑，可冻结拷贝后的数组：

console.log(Object.freeze([...array]));

• 适用场景：仅需验证某一时刻数组状态，且不影响后续代码执行的调试场景
• 优点：直接锁定打印时的状态，无需额外拷贝逻辑
• 缺点：若后续代码依赖数组修改，可能导致逻辑异常，需谨慎使用

5. 使用Chrome DevTools断点调试 #

在console.log语句处设置断点，代码执行到断点时，查看Scope面板中的数组状态，此时看到的是当前时刻的真实状态，无需依赖控制台的延迟展开：

1. 在Chrome DevSources面板中找到对应代码行
2. 点击行号左侧添加断点
3. 刷新页面触发断点，在Scope面板中查看数组实时内容

• 适用场景：需要深入调试代码执行流程，查看多个时刻数据变化的情况
• 优点：最准确的实时状态查看，能结合代码执行流程分析问题
• 缺点：需要手动操作断点，适合复杂调试场景

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