类属性在console.warn与断点调试中显示不一致问题排查

这种情况确实挺诡异的，我之前调试时也碰到过类似的坑，结合你的代码咱们一步步拆解排查：

先排查最容易忽略的拼写问题 #

先确认你在控制台输入的是完整的this.myProperty，不是像代码里截断的this.myPrope——拼写错误是调试时最常见的“假bug”，别笑，手滑打错字真的很容易发生。

验证this的实际指向 #

在断点暂停时，先在控制台输入this回车，看看打印出来的对象是不是你的类实例：

• 如果这个对象里根本没有myProperty属性，那说明箭头函数的this绑定出了问题？不过你用的是箭头函数，它的this是词法继承自doStuff方法的上下文，而doStuff是类的实例方法，正常调用instance.doStuff().doSomething()的话，this应该指向类实例才对。
• 如果this是你的实例，但看不到myProperty，试试用Object.getOwnPropertyNames(this)查看所有属性，有时候DevTools会默认隐藏某些属性。

排查DevTools的显示bug #

浏览器开发者工具偶尔会有这种“显示异常”的小问题，尤其是处理词法绑定的箭头函数时：

1. 可以在console.warn前加一行临时变量验证：

   doSomething: (...args) => {
     const tempProp = this.myProperty; // 新增临时变量
     console.warn('this.myProperty', tempProp);
   }
   

   断点设在const tempProp这一行，查看tempProp的值，同时在控制台访问tempProp和this.myProperty对比结果。如果tempProp是true但this.myProperty显示undefined，基本可以确定是DevTools的显示bug。
2. 换个调试方式试试：比如用debugger语句手动触发断点，或者切换到Firefox的开发者工具看看——不同浏览器的调试器实现略有差异，有时候换个环境就正常了。

有没有可能属性被异步修改？ #

虽然调试时JS是单线程的，暂停期间不会执行其他代码，但如果你的doSomething是在异步回调里被调用的，比如：

const instance = new YourClass();
setTimeout(() => {
  instance.doStuff().doSomething();
}, 1000);

那可以排查下调用doSomething之前，有没有其他代码修改了instance.myProperty为undefined？不过你说console.warn输出的是预期的true，说明执行到console.warn时属性还是正常的，这种可能性比较低，但也可以顺手排查下。

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