如何使用Chrome Dev Tools查看WebGL的内存分配与释放情况？

Chrome内置了专用的调试工具，可以直接追踪WebGL的资源分配、释放情况，具体操作如下：

1. 开启WebGL Inspector查看实时资源计数 #

• 打开DevTools（快捷键F12/Ctrl+Shift+I/Cmd+Opt+I），点击右上角三点菜单，选择「更多工具」>「WebGL Inspector」开启面板
• 面板会实时展示当前页面所有WebGL上下文的资源统计项，包含纹理、缓冲区、着色器、程序、帧缓冲区、渲染缓冲区等各类WebGL资源的实时数量和总占用内存
• 操作应用前后对比计数变化，即可快速判断是否有资源未被正确销毁

2. 用Performance面板录制运行时资源变动 #

• 打开Performance面板，勾选面板顶部的「WebGL」选项
• 点击录制按钮后执行你要测试的应用操作，操作完成后停止录制
• 结果页的WebGL分类下，可以看到录制周期内所有WebGL资源的创建、销毁事件，以及内存占用的波动曲线
• 排查泄漏时可以重复相同操作多轮，若每轮结束后资源计数持续上涨，即可确定存在未释放资源

3. 拍摄GPU内存快照定位泄漏明细 #

• 打开Memory面板，点击顶部下拉选择「GPU memory snapshot」，点击「Take snapshot」拍摄当前GPU内存快照
• 快照会列出所有当前存活的WebGL资源明细，包含每个资源的类型、大小、创建堆栈（需提前开启堆栈记录）
• 操作前后分别拍摄快照，对比两次快照的资源差异，即可直接定位到没有被释放的具体资源

小提示：你可以打开DevTools设置（快捷键F1），在「Experiments」实验室页中开启「WebGL debug renderer」，开启后Chrome会记录每个WebGL资源的完整创建调用栈，更方便定位泄漏对应的代码位置。

另外你也可以在地址栏输入chrome://gpu，查看浏览器全局的GPU内存总占用、WebGL上下文状态等全局信息。

内容的提问来源于stack exchange，提问作者Ben