如何通过ChromeDevTools调试VSCode插件内存泄漏

星晨酱_3266

星晨酱_3266

2026-09-03

844人浏览

原创

应使用code --inspect-extensions=9333启动vs code,再通过chrome://inspect连接extension host进程,拍摄三次堆快照(空载、操作后、关闭等待gc后),对比retained size定位detached dom和closure泄漏。

如何通过chromedevtools调试vscode插件内存泄漏

直接用 chrome://inspect 连 VS Code 扩展宿主进程

VS Code 插件(尤其是基于 WebView 的,比如 vscode-drawio)运行在独立的扩展宿主进程中,不是主窗口渲染进程。想抓到插件的真实内存行为,必须连对端口——不是 chrome://inspect 默认显示的“Visual Studio Code”主进程,而是扩展宿主(Extension Host)。
操作前先关掉所有 VS Code 实例,然后终端执行:
code --inspect-extensions=9333
再打开 chrome://inspect → Configure → 添加 localhost:9333 → 刷新 → 找到 “Extension Host” 条目并点 inspect。如果没看到,说明没用 --inspect-extensions 启动,或者端口被占用了。

拍三次快照,别只拍一次

单张堆快照看不出泄漏,必须对比变化。典型节奏是:
• snapshot-0:刚连上、没打开任何 .drawio 文件、插件处于空载状态
• snapshot-1:打开 2–3 个复杂图表、切换几次标签页、触发一次导出
• snapshot-2:全部关闭后等待 30 秒,等 V8 完成 GC 再拍
右键 snapshot-2 → Compare to previous snapshot,按 Retained Size 降序排。重点筛:
• 构造函数为 Closure 且 Retained Size > 5MB 的项
• 类型为 Detached 的对象(Node.js 环境里它代表“该回收但没被回收”的强引用对象)
• 出现在 Retainers 链里的 cache、handlers、_webviewInstances 这类名字

Chrome Mcp
Chrome Mcp

通过 Chrome DevTools MCP 控制本机 Chrome 浏览器(保留已登录会话)。适用场景:浏览读取任意网页内容;操作 X (Twitter):浏览动态、发推文、转帖、点赞、删帖;操作任何需登录网站(保留登录状态);网页截图、读取页面结构、执行 JS 脚本。

下载

看 Retainers 链,别信 Shallow Size

Shallow Size 只是对象自己占多少字节,Retained Size 才是你真正该盯的数字——它等于这个对象 + 所有它强引用的对象总内存。比如一个闭包本身才 128B,但它闭包里捕获了一个 20MB 的 Uint8Array 图像数据,Retained Size 就是 ~20MB。
展开可疑构造函数后,在右侧 Retainers 面板里找:
• 是否存在未清理的 EventEmitter.on 监听器(尤其监听了 webview.onDidDispose 却没 .off())
• 是否有全局 Map 或 WeakMap 缓存了已销毁的 Webview 实例
• this._commitCache、context、module.exports 这些字段名是否指向你自己的插件代码路径
如果 Retainers 里全是 Node.js 内部模块(如 internal/modules/cjs/loader.js),基本可排除是你的代码问题。

避免 launch.json 自动启动带来的漏检

用 VS Code 自带的 launch.json 以 type: "pwa-node" 启动插件调试,会错过进程初始化阶段的泄漏——比如插件激活时注册的全局定时器、模块顶层缓存、require 阶段创建的闭包,这些在调试器 attach 前就已存在。
必须改用手动命令启动:
node --inspect=9229 ./out/extension.js
再配 launch.json 为 attach 模式,port 对齐,localRoot 和 remoteRoot 都设为 "${workspaceFolder}",否则快照里看不到源码映射和变量名。
另外,开发时加 --max-old-space-size=1024 能让 OOM 提前暴露,缩短定位周期——别怕崩,崩了反而说明泄漏真实存在。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2706

5

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.06

5259

7

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

2026.03.24

3767

22

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1375

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2892

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1969

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1727

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2607

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1838

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程