VSCode的开发者工具用于诊断其自身性能问题,而非用户代码;它显示Electron渲染/主进程状态,不监控Node.js或Python程序。

VSCode 的「开发者工具」(DevTools)不是用来检测你写的代码性能的,而是用来诊断 VSCode 自身卡顿、内存泄漏或启动慢的——它暴露的是 Electron 渲染进程和主进程的运行状态,不是你的 Node.js 或 Python 程序。
Developer: Toggle Developer Tools 打开的是什么
按 Ctrl+Shift+I(Windows/Linux)或 Cmd+Option+I(macOS)打开的,是 VSCode 应用自身的 Chromium DevTools,和你在 Chrome 里按 F12 打开的完全一样。它只看到 VSCode 的 UI 层:比如 workbench.desktop.main.js 初始化耗时、某个扩展的 activate() 同步阻塞了主线程、或者 DOM 渲染掉帧。
- Performance 标签页能录制“从点击菜单到弹出面板”这段过程的主线程调用栈,识别哪段 JS 拖慢了交互
- Memory 标签页可拍堆快照,对比两次操作后是否多了几千个
TextModel实例(说明某扩展没释放文档监听器) - Console 里搜
WARN或Extension host terminated unexpectedly,常暴露扩展崩溃前兆 - Network 标签页几乎无用——VSCode 不走标准 HTTP 请求加载扩展,它的网络行为藏在 Extension Host 进程里
为什么 Performance 面板里看不到你的代码火焰图
因为这个 Performance 面板只采集 VSCode 自身渲染进程的 JS 执行,不包含你调试的 Node.js 进程、Python 进程,也不包含 Extension Host 里运行的插件逻辑(那些 JS 在独立 V8 isolate 中运行,需用 Developer: Start/Stop Extension Host Profile 单独导出)。
- 你在
launch.json里配了"runtimeArgs": ["--inspect-brk"]?那得去chrome://inspect连你的 Node.js 进程,不是连 VSCode 的 DevTools - 想看 Python 性能?
py-spy record -p或cProfile输出.prof文件,再用snakeviz打开——和 VSCode DevTools 完全无关 - 误以为在 DevTools 里点 Record 就能抓到自己写的
fetch()耗时?那是错觉。VSCode 的网络请求走的是 Electron 的net模块,不经过 Chromium 的 Network 面板
真正该盯住的三个 DevTools 信号
别盯着 FPS 或 Summary 面板的平均值,重点关注这三个具体指标:
-
Typing took 142ms—— 出现在状态栏 ⚡ 图标里,由Developer: Toggle Performance Impact触发,代表编辑器主线程被锁死的真实时长,比任务管理器里的 CPU% 更准 - Performance 面板里
workbench.desktop.main.js下的startup阶段持续 >800ms?说明某个扩展在activate()里同步读大文件或跑正则 - Memory 面板连续拍三次快照,
Detached DOM tree数量持续增长,且保留路径指向某个扩展的WebviewPanel?大概率是它没销毁 iframe 或事件监听器
最易被忽略的一点:DevTools 里的任何分析,都必须配合 Developer: Open Process Explorer 交叉验证。比如 Performance 显示 ms-python.python 占用高,但 Process Explorer 里它的 Memory 只有 80MB —— 那问题其实不在它,而在它触发的 Python 语言服务器进程(那个进程不归 DevTools 管)。











