VSCode的「开发者工具」(DevTools)是Chromium DevTools,用于调试渲染进程,无法访问vscode API;而「调试控制台」(Debug Console)是调试会话中用于表达式求值的交互面板,不显示插件console.log。

VSCode 的「开发者工具」(DevTools)和「调试工具面板」(Debug Console)是两个完全不同的东西,不能混用。你按 Ctrl+Shift+I 打开的是 Chromium 渲染进程的 DevTools,它看不到插件逻辑、访问不了 vscode API;而真正能调试插件代码的,是运行在 extension host 进程里的上下文——它的控制台只出现在「Extension Development Host」窗口中。
必须在 Extension Development Host 窗口里开 DevTools
插件代码不跑在你日常用的那个 VSCode 主窗口里,而是跑在一个独立启动的、标题栏带 [Extension Development Host] 的新窗口中。这个窗口由 F5 启动,且只有在这个窗口里打开的 DevTools 才能:看到 console.log、设断点、访问 vscode 全局对象、检查 extension.ts 实际执行流。
- 确保项目根目录有
package.json(含activationEvents)和src/extension.ts - 按
F5启动调试,等待新窗口弹出并显示[Extension Development Host] - 把焦点切进该窗口,再按
Ctrl+Shift+I(Win/Linux)或Cmd+Option+I(macOS) - 如果快捷键无效,先检查是否被 Karabiner、PowerToys 等工具劫持;也可用命令面板:
Ctrl+Shift+P→ 输入Developer: Toggle Developer Tools
Debug Console 面板根本不是 DevTools,别指望它输出 console.log
Debug Console 是调试会话期间附加到调试器的表达式求值面板,不是运行时日志通道。它只显示你在断点暂停后手动输入的表达式结果,或者调试器注入的临时日志(比如 debugger; 触发后)。插件里写的 console.log('hello') 不会出现在这里。
-
Debug Console仅在有效调试会话中自动出现(如按F5启动 Node.js 调试配置),不是插件开发默认环境 - 它依赖
launch.json中的type字段(如node、pwa-node),对纯插件开发无意义 - 若想看插件初始化阶段的输出,唯一可靠方式是写文件日志:
require('fs').appendFileSync('./debug.log', `[${new Date().toISOString()}] ${msg}\n`)
为什么断点不命中?八成是 sourceMap 或路径没对上
即使 DevTools 开对了,断点也可能不生效。常见原因不是代码写错了,而是调试上下文根本没加载你的源码映射。
- 确认
tsconfig.json中启用了"sourceMap": true,且outDir和rootDir设置合理 - 检查
.vscode/launch.json里sourceMaps是否为true,outFiles是否指向编译后的out或dist目录 - 在 DevTools 的 Sources 面板里,展开
webpack://或file://,找得到你原始的extension.ts文件才算成功映射 - 如果只看到压缩后的 JS,说明 sourceMap 没生成或路径解析失败;此时断点只会打在 bundle 里,不可读也不可控
最常被忽略的一点:插件激活前的模块加载错误(比如 require 失败、语法错误)永远只出现在主 VSCode 窗口的 DevTools 里,而不是 [Extension Development Host] 窗口。所以看到插件压根没反应,第一反应不该是查新窗口,而是切回主窗口按 Ctrl+Shift+I 看 Console —— 那里藏着真正的“第一行报错”。


















