SpectorJS 工具提供了npm模块、Chrome扩展程序等多种安装方式。本文推荐的是Chrome 端插件。
使用SpectorJS:
1、SpectorJS安装完成后，Chrome浏览器的地址栏右侧将会出现一个红色小图标，如下图所示默认情况下， SpectorJS处于非工作状态。
2、点击这个红色图标，图标变成绿色， SpectorJS开始工作，将重新加载当前页面，并注入调试代码用来收集当前Web页面的渲染信息，如图所示。
3、打开需要分析的游戏页面后，再次点击插件的绿色图标，将会出现如下弹窗
4、点击上图捕获的选项，片刻之后SpectorJS收集完信息后，会自动新打开一个Chrome页面，并展示收集到的渲染信息，如下图所示。例如，本Web页面有4个DrawCall，则SpectorJS大约生成4-6张截图，从图中左侧图列可以看出，每一张截图对应一个DrawCall，通过比较不同图片的差异，就能看出本次DrawCall究竟绘制了什么，从而帮助判断DrawCall是否可以合并。
Spector.js v0.9.28.0
上次更新日期：2022年8月1日
未经允许不得转载：老杜博客 » Chrome插件Spector.js WebGL 开发者工具 DrawCall优化之分析利器
