JavaScript 对象属性的动态显示

在使用 console.log() 调试 JavaScript 代码时，你可能会观察到一个有趣的现象：即使没有再次调用 console.log()，对对象的修改也会立即反映在控制台输出中。 让我们通过一个例子来解释这种行为：

let myObject = {};
console.log(myObject);
myObject.newProperty = "Hello!";

即使 console.log(myObject) 只执行了一次，你仍然会在控制台中看到新添加的 newProperty 属性。 这并非因为 console.log() 持续监控对象，而是因为它显示的是对象的引用，而不是对象的副本。

console.log(myObject) 打印的是 myObject 在内存中的地址。 当我们修改 myObject 时（例如添加 newProperty），实际上修改的是内存中该对象本身。 因此，浏览器渲染控制台输出时，会显示对象当前的实时状态，包括新添加的属性。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

立即学习“Java免费学习笔记（深入）”；

控制台显示的是对象内存中的实时状态，而不是 console.log() 执行时的快照。 任何后续的修改都会立即反映在输出中。

如果你需要获取对象在特定时刻的快照，可以使用 JSON.stringify() 方法将其转换为字符串：

let myObject = {};
let snapshot = JSON.stringify(myObject);
console.log(snapshot);
myObject.newProperty = "Hello!";
console.log(snapshot); // snapshot 仍然是最初的对象状态

通过将对象序列化为字符串，你可以获得一个在特定时间点对象的静态副本，后续对对象的修改不会影响这个字符串。