Debugging Chrome Favorite

Chrome allows you to profile and debug canvas elements from the Developer Tools. It can be used for both 2D and WebGL canvas projects.

To be able to do this, you need to have enabled the "Experiments" tab. If you haven't already, navigate to chrome://flags and enable the option marked "Enable Developer Tools experiments". You'll need to press "Relaunch Now" button at the bottom of the page to apply your changes. Go to the Settings panel of Chrome Developer Tools by clicking the cog on the bottom right. Click the "Experiments" tab and check the option "Canvas inspection".

Now visit the "Profile" tab and you will see an option called "Capture Canvas Frame". The Developer Tools may ask you to Reload the page to use the canvas. Pressing "Start" captures a single frame of the canvas application. Alternatively, you can click the box below to switch to "Consecutive Frames" which allows for capture of multiple frames.

Chrome creates a log of each call to canvas, providing a list of each call to the context and a screenshot. You can click one of the log items to replay the frame in the Developer Tools and see which commands were called in the order they were called and from which line.

Firefox has Canvas and WebGL Shader debugger, giving you features to inspect frames, fps, modify shaders and more.

In order to enable these tools, go to Devtools settings (the cog icon in devtools) and check "Canvas" and "Shader Editor".