I am looking for WebGL debug and inspection tools - something like FireBug for WebGL.
Any recommendations?
Just found WebGL Inspector. It claims to be an advanced WebGL debugging toolkit. I haven't personally tried it yet.
As mentioned above WebGL-Inspector is a tool, allowing you to analyze textures and buffers passed into shader programs. For low-level issues advanced tools are necessary which track driver API calls, memory consumption etc.
Depending on the used OS you can use OpenGL/DirectX Debuggers and attach them to your browser.
WebGL Inspector is a very good tool, but has many glitches in UI. I can also recommend Canvas debugger and Shader Editor inside FireFox debugger tools (they turned off by default and you should enable them in settings)
I tried out WebGL Inspector, WebGL Insight, and Spector.js.
The first two seem to have the most features if you can get them working. Unfortunately, WebGL Inspector has issues with bundlers and I am using webpack. It has some installation caveats on the Github page to get it working with bundlers, but it's pretty sloppy.
Someone on the Reviews section for WebGL Insight says it might only work if your <canvas> is loaded from the start. Again, I tried moving my canvas creation to index.html as markup, but was unable to get it working.
Spector.js was the only one that worked for me out of the box. Its feature set is more minimal, but you can at least see the state for each frame and stack traces.
来源：https://stackoverflow.com/questions/5727969/webgl-debug-tools