JavaScript对象属性访问异常：控制台显示与实际取值不一致求助

这是前端调试里非常常见的“控制台快照延迟”问题，我来给你拆解清楚：

核心原因：JavaScript对象的引用特性 + 控制台的懒加载机制 #

• 当你用console.log()打印一个对象时，浏览器控制台不会立即把对象的所有属性值都快照下来，单行显示的是调用log那一刻的属性表面值（或者是当时能快速读取的状态）。
• 但当你点击展开对象详情时，控制台会实时去读取这个对象的当前值——如果在console.log()之后，你的代码又修改了这个对象的height属性，就会出现“单行显示旧值，展开显示新值”的矛盾。

举个例子，你的代码逻辑大概率是这样的：

const positionObj = { longitude: 0.1367152479042797, latitude: 0.8081125973585543, height: 638 };
console.log(positionObj); // 此时单行显示height:638
// 后续代码异步或同步修改了height属性
positionObj.height = 764.1600000000001;

当你后期展开控制台里的positionObj时，它已经是被修改后的状态了。

如何避免这个调试坑？ #

给你几个实用的解决方案：

• 打印对象的静态快照：如果想精准看到调用log时的对象状态，可以把对象转换成JSON字符串再打印，生成一个不会被后续修改影响的静态快照：

  console.log(JSON.parse(JSON.stringify(positionObj)));
  

  注意：这个方法不适合包含函数、Symbol、循环引用的对象。

• 直接打印单个属性：不需要看整个对象的话，直接打印你关心的属性，比如console.log(positionObj.height)，这样能直接拿到当前时刻的准确值。

• 断点暂停代码：如果是异步逻辑导致的属性修改，可以在console.log()那一行打个调试断点，暂停后再查看对象——此时对象还没被后续代码修改，就能看到最真实的初始状态。

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