VSCode插件调试异步代码技巧-VSCode-PHP中文网

vscode插件开发中async/await断点不触发，根本原因是node.js未启用异步堆栈追踪，需在launch.json的env中同时配置"promise_debug": "1"和"node_options": "--enable-source-maps"，缺一不可。

vscode插件调试异步代码技巧

VSCode插件开发中async/await断点不触发？检查`launch.json`里`env`配置

VSCode插件本身运行在Electron主进程+渲染进程混合环境中，而插件代码多用async/await组织逻辑（比如激活时拉取配置、命令执行前校验权限）。但默认调试配置下，断点常变成灰色、单步跳过、或直接跳进node_modules里——根本原因不是代码问题，而是Node.js未启用异步堆栈追踪。

必须显式开启：PROMISE_DEBUG=1和NODE_OPTIONS=--enable-source-maps。否则V8无法将await暂停点映射到源码行：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Extension",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/out/**/*.js"],
      "env": {
        "PROMISE_DEBUG": "1",
        "NODE_OPTIONS": "--enable-source-maps"
      }
    }
  ]
}

PROMISE_DEBUG=1让V8在Promise链断裂或await挂起时保留调用上下文
--enable-source-maps确保out目录生成的JS能反向映射回src里的TypeScript行号
漏掉任一参数，断点都可能失效，且控制台不会报错——这是最隐蔽的坑

调试时看到一堆`Promise<pending></pending>`却看不到实际值？别只靠`console.log`

在插件调试中，console.log(myPromise)只会输出Promise {<pending>}</pending>，毫无价值。你真正需要的是“等它resolve后再看结果”，但又不能手动加.then(console.log)污染生产代码。

正确做法是：在调试器中选中变量名 → 右键 → “Evaluate in Console” → 输入await myPromise（注意：仅在调试暂停状态下有效）：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

这个操作会真实触发Promise执行，并把结果注入当前调试作用域
如果Promise被reject，控制台会显示完整错误堆栈，包括源头文件和行号
不要在console.log里写await——那会语法错误；必须用调试器的交互式控制台

为什么`debugger`语句在WebView里不生效？得用`webviewDeveloperTools`

VSCode插件若含自定义UI（比如用WebviewPanel展示图表或表单），里面的JS是运行在隔离的WebView进程中的。你在主扩展代码里打的断点、debugger语句，对WebView内脚本完全无效。

必须单独打开WebView调试环境：

先运行插件并唤出WebView面板
按Ctrl+Shift+P（macOS为Cmd+Shift+P），输入Developer: Open Webview Developer Tools
这时弹出的DevTools才是WebView的真实上下文，debugger和断点才起作用
注意：WebView的console.log不会出现在主调试控制台，只在这里可见