这类插件功能最强大，可以用于任何基于 WebGL 的网站或应用。
- Spector.js - （首选推荐）
这是目前最强大、最专业的 WebGL 调试工具，可以说是查看 Draw Call 的行业标准。
核心功能：
帧捕获：可以捕获任意一帧内所有 WebGL 调用的完整快照。
详细的 Draw Call 列表：在捕获的帧中，你可以清晰地看到一个完整的命令列表，每一个 drawElements 或 drawArrays 调用（即一个 Draw Call）都会单独列出。
上下文状态查看：点击任何一个 Draw Call，你可以查看在发出该调用时，所有 WebGL 状态的详细信息，包括：
绑定的纹理、着色器程序
顶点属性、缓冲区
Uniform 变量
深度测试、混合模式等
着色器代码查看：可以查看和编辑当前 Draw Call 使用的顶点和片段着色器。
优点：功能极其全面，信息准确，是进行深度 WebGL 性能分析和 bug 调试的必备工具。
缺点：对于初学者来说，信息量巨大，需要一定的 WebGL 基础知识才能有效利用。
使用方法：打开页面 -> 点击插件图标 -> 点击捕获按钮 -> 在页面上进行交互（触发你想要分析的渲染） -> 回到插件界面查看详细的调用记录。
- WebGL Inspector
这是另一个经典的 WebGL 调试工具，功能与 Spector.js 类似，但近年来更新可能不如 Spector.js 频繁。
核心功能：
同样支持帧捕获和 Draw Call 跟踪。
以时间线视图显示渲染调用。
可以重放、单独禁用某个 Draw Call 来排查问题。
查看纹理和缓冲区内容。
优点：界面直观，时间线视图对于理解渲染顺序很有帮助。
缺点：在某些新版本的 Chrome 或复杂的 WebGL 2.0 应用中可能兼容性不如 Spector.js。
