WebGL Dev Tools

WebGL Insight for Chrome

https://github.com/3Dparallax/insight

WebGL Inspector

Installation

• Chrome Web Store
• Firefox Add-ons
• Otherwise https://benvanik.github.io/WebGL-Inspector/

Usage

1. Click "GL Icon" in Chrome's Extensions Menu right of the URL input
2. Record all WebGL calls
3. Inspect Buffers / Textures

Firefox Dev Tools

Installation

1. Open Firefox Dev Tools
2. Click on Toolbox Options (Cog Icon) in the upper right of the dev tools
3. Enable "Shader Editor" and "Canvas"

Usage

• Use Shader Editor to live edit shaders
• Use Canvas Tool to record all WebGL commands and see them rendered frame by frame
• Inspect Buffers / Textures

OSX OpenGL Driver Monitor

Installation

1. Go to Xcode's Menu Xcode | Open Developer Tools | More Developer Tools.
2. Download Graphics Tools of XCode
3. Execute OpenGL Driver Monitor

Usage

1. Click un Parameters in bottom right corner
2. Select desired parameter, like GPU utilization or memory utilization.

Chrome's about:tracing

Follow instructions on HTMl5Rocks