VSCode插件调试必须在Extension Development Host实例中进行,断点只在其独立窗口生效;需正确配置launch.json的pwa-extensionhost类型、package.json的activationEvents,并确保sourceMap路径映射准确。

VSCode插件调试必须用 Extension Development Host 实例
直接在主 VSCode 窗口里按 F5 调试插件,断点永远不会命中——因为插件代码运行在独立的扩展宿主进程里,不是你当前编辑器的主进程。你看到的“调试”窗口其实是另一个干净、隔离的 VSCode 实例(即 Extension Development Host),所有断点、console.log、变量监视都只在这个窗口中生效。
常见错误现象:
- 在
extension.ts打了断点,F5 启动后没反应,控制台也无输出 - 修改插件代码后重载(Ctrl+R),断点消失或不触发
- 误以为
console.log会打印到主窗口的开发者工具控制台(实际输出在Extension Development Host的DEBUG CONSOLE或终端)
正确做法:
- 确保项目根目录有
.vscode/launch.json,且配置"type": "pwa-extensionhost" - 启动调试前,先保存所有文件;F5 后等待新窗口完全加载完成再操作
- 在新窗口中打开测试文件(如
test.js),触发你注册的命令或事件(例如右键菜单、快捷键、文件保存等)
package.json 的 activationEvents 决定断点何时可用
VSCode 插件是懒加载的:除非满足 activationEvents 中声明的条件,否则插件的 activate() 函数根本不会执行,extension.ts 里的代码也不会被加载——自然也就无法设断点或调试。
典型场景:
- 你写了
onCommand:myExtension.hello,但没在package.json里声明,调用命令时断点不触发 - 你监听
onLanguage:javascript,但测试文件后缀是.ts,插件未激活 - 用了
*激活,但忘记加onStartupFinished,导致首次启动时部分逻辑错过
建议配置组合(根据实际用途选):
- 命令类插件:
"onCommand:myExtension.doSomething" - 语言相关:
"onLanguage:javascript"、"onLanguage:typescript" - 确保启动即加载:
"onStartupFinished"(慎用,影响启动性能) - 避免漏掉:
"*"仅用于开发验证,上线前必须收敛
调试 Node.js 后端逻辑需额外配 program 和 cwd
很多插件会启动子进程(比如调用 node server.js、运行 CLI 工具、fork child_process),这类代码不在扩展宿主里运行,不能靠 pwa-extensionhost 直接断点。你得为子进程单独建一套 Node.js 调试配置。
关键点:
- 在
.vscode/launch.json中新增一个"type": "pwa-node"配置项 -
"program"必须指向实际被执行的 JS 文件(例如"${workspaceFolder}/out/server.js") -
"cwd"要和子进程启动时的工作目录一致,否则require路径、配置读取会失败 - 如果子进程由插件动态生成(如拼接命令行),可在启动前加
debugger;并配合node --inspect-brk参数
示例片段:
{
"name": "Debug Server",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceFolder}/out/server.js",
"cwd": "${workspaceFolder}",
"env": { "NODE_ENV": "development" }
}
Source map 映射失效时,断点会“漂移”或失效
TypeScript 插件编译后生成 out/ 目录,但你在 src/ 里设断点。如果 sourceMapPathOverrides 配置不对,VSCode 就找不到源码位置,表现为:断点显示为空心圆、点击后变成灰色、停在错误行、或根本不停。
最常踩的坑:
- 路径用了
${workspaceRoot}(已弃用),应统一用${workspaceFolder} - TS 编译输出路径和
launch.json中的out目录不一致(比如dist/vsout/) - 未在
tsconfig.json中启用"sourceMap": true和"inlineSources": true
推荐映射写法(适配默认 TS 输出结构):
"sourceMapPathOverrides": {
"webpack:///./src/*": "${workspaceFolder}/src/*",
"src/*": "${workspaceFolder}/src/*",
"out/src/*": "${workspaceFolder}/src/*"
}
复杂点在于:插件可能同时含前端 WebView 代码、Node 子进程代码、WebWorker 代码——每种都要独立验证 source map 是否对得上。别假设“编译出来了就一定映射对”。


















