vscode 的开发者工具即 chromium devtools,通过 ctrl+shift+i(win/linux)或 cmd+option+i(macos)打开,用于调试渲染进程;主进程需用 launch extension 模式调试,console 中无法访问 vscode api。

VSCode 的开发者工具在哪打开
VSCode 自身没有独立的“开发者工具”面板,它用的是 Chromium 内置的 DevTools —— 本质就是 Electron 应用的调试界面。打开方式非常固定:Ctrl+Shift+I(Windows/Linux)或 Cmd+Option+I(macOS)。这个快捷键直接唤起渲染进程的 DevTools,和 Chrome 打开网页开发者工具一模一样。
注意:必须在 VSCode 窗口获得焦点时按,如果当前焦点在编辑器里但光标在代码中,依然有效;但如果焦点在弹出的系统对话框(比如“保存文件”窗口)上,会失效。
- 快捷键无效?先确认是否被系统或其他软件劫持(比如某些键盘管理工具会吞掉
Ctrl+Shift+I) - 菜单路径是:
Help → Toggle Developer Tools,可作为备用入口 - 打开后看到的是“Elements”、“Console”、“Sources”等标签页,不是 VSCode 扩展界面本身
为什么在 Console 里打 console.log 没反应
VSCode 的主进程(main process)和渲染进程(renderer process)是分离的。你在 DevTools 的 Console 里输入代码,运行在渲染进程上下文中,而大多数扩展逻辑、配置读取、文件系统操作都跑在主进程中 —— 它们彼此不共享全局作用域。
所以你敲 console.log('hello') 能执行,但想查 vscode.workspace 或调用 vscode.window.showInformationMessage 会报错:ReferenceError: vscode is not defined。
- 要调试扩展逻辑,必须用
Launch Extension启动模式,在Extension Development Host窗口中打开 DevTools - 主进程日志看
Help → Toggle Developer Tools后切换到Console标签,但只显示渲染层错误(如 UI 组件崩溃、CSS 加载失败) - 真正有用的日志在
Developer: Open Logs Folder命令里,对应路径类似~/.vscode/logs/
如何定位扩展导致的卡顿或崩溃
卡顿大概率是某个扩展在主线程做了重操作(比如同步读大文件、正则回溯爆炸),崩溃常源于 native 模块异常或内存泄漏。DevTools 的 Performance 和 Memory 标签能辅助判断,但关键第一步是隔离问题来源。
- 启动时加
--disable-extensions参数:code --disable-extensions,确认是否恢复流畅 - 逐个禁用可疑扩展,尤其那些带“file watcher”、“auto-format”、“git lens”字样的
- 在 DevTools 的
Performance面板录制操作(比如打开一个大文件),重点关注Scripting时间占比高的任务,点击展开能看到具体调用栈,常含扩展 ID(如vscode.git) - 崩溃后查看
Help → Toggle Developer Tools → Console是否有ERR!开头的红色错误,例如ERR! Extension host terminated unexpectedly
调试 Webview 或 Notebook 渲染器时 DevTools 不生效
Webview 和 Notebook 的内容运行在独立的沙箱渲染器进程中,它们的 DevTools 默认不随主窗口一起打开。你得手动触发 —— 右键 Webview 区域(比如 Markdown 预览窗),选择 Inspect;或者在 Notebook 单元格右键选 Inspect Element。
这时打开的是该 Webview 实例专属的 DevTools,console 里能访问到 acquireVsCodeApi() 返回的对象,也能看到自己注入的脚本执行情况。
- 如果右键没出现
Inspect,说明该 Webview 设置了enableScripts: false或启用了localResourceRoots限制 - Notebook 渲染器调试前建议关闭
notebook.experimental.useSeparateRendererProcess(设为false),否则多个渲染器进程会让调试目标变模糊 - Webview 中的
fetch请求走的是 VSCode 内置代理,不会出现在 Network 面板,要用console.log或debugger配合断点查









