Angular 16异步函数中Chrome DevTools无法访问this的问题咨询

核心原因：构建工具切换带来的编译逻辑变化 #

Angular 16 默认启用了 ESBuild 作为默认构建工具，替代了此前版本的Webpack。ESBuild在编译类中的异步函数时，为了避免异步流程（比如Promise回调）中的作用域混淆，会自动将原始的this变量重命名为_this（或类似内部变量名），以此确保this始终指向正确的类实例。

与旧版本的差异 #

此前Angular版本使用Webpack+TypeScript编译时，虽然也会处理this的作用域绑定，但生成的编译代码中不会对this进行重命名，因此在Chrome调试工具中可以直接查看this。而Chrome调试工具显示的是编译后的JS代码，而非编写的原始TS代码，所以当ESBuild完成重命名后，调试时只能通过_this访问原类实例。

补充说明 #

• 这个变化属于ESBuild的编译优化细节，并非Angular框架本身的API变更，因此不会出现在Angular官方更新日志中。
• 若想在调试时直接使用this，有两种解决方式：
  • 在angular.json中临时切换回Webpack构建（Angular 16仍保留Webpack作为可选构建器）；
  • 启用Chrome的**源代码映射（Source Map）**功能，直接在原始TS代码断点调试，此时无需关注编译后的变量名，可正常访问this。

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