最近学习渲染时发现了spectorjs，用后感觉极好。虽然论坛已有很多帖子分享过spectorjs，但本着勿让需要的人错过的想法再发一帖。
我觉得这个工具在学习和debug渲染逻辑方面至少有两个突出优点：一是可以看到渲染时实际使用的vertex/fragment shader代码，二是可以看到渲染时调用webgl接口的引擎代码。
查看渲染时实际使用的shader代码
个人学习了解cocos shader相关逻辑时，最大的痛点就是宏定义和include实在太多，导致shader逻辑很难看懂。使用spectorjs可以看到draw call使用的vertex/frag的shader代码，各有两个版本，一个是包含宏定义的原始版本，另一个是解析完宏定义的精简版本（translated）。以builtin-toon渲染算法为例，原始版本有900多行，精简版本170多行，精简版本可读性好很多，当然里面还是有很多占位的空函数，但可以很容易看懂核心逻辑。
查看渲染时调用wegbl接口的引擎代码
个人想深入了解引擎渲染逻辑，之前看了一些讲解cocos渲染框架的文章，但是因为引擎已经迭代、引擎代码太繁杂，难以入手。使用spectorjs可以直接看到触发draw call的引擎代码，然后在chrome里打断点，看调用栈，直接一口气从后往前快速了解引擎渲染逻辑。例如，下图的drawElements调用是从WebGL2PrimaryCommandBuffer这个类的draw函数里触发的，然后去chrome打断点看调用栈，可以看到大致的渲染流程。
最后，一言以蔽之，个人认为spectorjs最大的用处就是能告诉我们渲染时到底发生了什么。方便webgl debug。
再后，个人也是刚入门，若有错漏请大佬们指正。