CocosCreator + Chrome 实用插件介绍

Spector.js

下载地址(需要梯子)

Spector.js 是针对WebGL的一个调试工具，它可以帮助我们了解context当中到底发生了什么事情，每一帧的信息都会显示出来，包括每一个drawcall绘制的纹理到底是哪些，我们都可以很直观的了解到

例如我们新建一个Cocos Creator 2.1.2的HelloWorld工程

在Chrome当中预览，我们可以看到：

这时我们可以点击Chrome右上方Spector的小图标，开启Spector

开启后图标会变为绿色：

这是点击这个图标，弹出这个界面：

点击红色圆圈按钮，就可以看到当前界面这一帧的WebGL信息：

最左边一栏可以很直观的看到每一个GL指令后的界面视图的变化
中间一栏就是我们执行的一个个GL Commond
最后边一栏可以查看每一个GL Commond中的详细内容

你可以查看每一个DrawCall去绘制的内容

如果你有用到Shader，也可以在最右边的信息中去查看这个DrawCall使用的Shader的具体信息以及代码

非常的实用

举个例子，当我们开启了dynamicAtlas功能，我们可以通过查看DrawCall的情况，来看哪一个RenderComponent打断了我们的批处理，知道是哪一个RenderComponent，我们就可以去查一下为什么打断了批处理，是由于Material/Shader不同？Group不同？还是说其他的原因
例如我讲HelloWorld工程当中的Label组件的CacheMode由None改为BITMAP

这时我们来看下DrawCall的情况：

label和sprite在一个drawcall中被同时绘制，drawcall得到了合并

从右边的drawcall信息中也可以看到，label和sprite使用的纹理都是同一张纹理，texture被动态合批了

通过这些信息我们就可以去继续深度优化我们的DrawCall，比如这里我们看到背景SingleColor.png并没有合批，我们可以看到背景所用的singleColor这张资源是2 x 2的一张资源。dynamicAtlas对于这样的小尺寸资源不会进行合批，因此我们直接把资源改大一点看一下，改到32 x 32看下：

DrawCall为2，没问题，剩下的debug信息我们不用管

这就是利用Spector来帮助我们优化渲染，查找问题。

WebGL Insight

下载地址(需要梯子)

同样也是WebGL的调试工具，但功能感觉比Spector少一些，使用起来也不是那么的方便。
和Google DevTools中的一些工具在功能上有部分重合，但使用起来没有Google DevTools方便。
所以这里就不详细介绍了，有兴趣的童鞋可以自己去下载下来玩一玩

Cocos Creator Devtool

下载地址(需要梯子)

这个插件可以帮助我们在预览运行当中查看节点的信息以及情况，同时也可以在运行过程中实时的改变节点的属性。方便进行一些复杂UI界面的调试，缺点就是自定义组件的属性没法修改，目前只支持引擎自带的组件

同时也可以省略一些调试代码，不用暂停就可以在控制台打印指定节点的信息。

Cocos Creator Debugger

下载地址(需要梯子)

与前面的Cocos Creator Devtool类似，不过貌似现在对Cocos Creator 2.1.x的支持不是很好，有一段时间没更新了。