Chrome调试器中async方法的this变量显示异常，求助解决

遇到的问题：

• 最初无法显示当前源代码，仅展示历史状态，已通过关闭重启DevTools、删除dist文件夹重新构建解决。
• 当前调试时，Scope.Local和控制台能正常读取变量值，但监视器或悬停查看变量时无法正常显示。
• 核心关联点：问题仅出现在带async前缀的方法中，移除async后调试器恢复正常，但需保留async语法。

可行解决方法 #

1. 校验source map配置 #

确保项目构建生成的source map完整且关联正确，避免构建工具对async函数的转译/压缩导致变量映射错位：

• Webpack：开发环境将devtool设为eval-source-map，避免使用cheap-source-map这类丢失变量信息的简化配置。
• Vite：开发模式下开启build.sourcemap: true，生产调试可设为'inline'或true。

2. 关闭DevTools的JS优化 #

Chrome DevTools的自动JS优化可能干扰async函数的调试：

• 打开DevTools按F1进入设置，找到Experiments，勾选Disable JavaScript optimization while debugging，重启DevTools后重试。

3. 强制保留变量引用 #

若构建工具对变量做了死代码消除，可在async函数内添加无业务影响的代码强制保留变量：

async function targetAsyncFunc() {
  let targetVar = xxx;
  // 强制保留变量引用，避免被优化
  console.log(targetVar);
  debugger;
  // 后续业务逻辑
}

4. 更新Chrome版本 #

旧版Chrome对async/await的调试支持存在已知bug，升级到最新稳定版Chrome后再调试。

5. 排除扩展干扰 #

部分Chrome扩展会影响DevTools功能，尝试在隐身模式下打开项目调试，排除扩展干扰。

内容的提问来源于stack exchange，提问作者A. L