Google Chrome Gets an HTML5 Canvas Profiler

Finally making it possible for devs to know what's happening inside the browser

  HTML5 Canvas profiling in Chrome
There aren't that many developers working with HTML5 Canvas, but those who are will be very excited about a new tool in Chrome. Google's browser is now capable of inspecting canvas elements, providing developers with very useful debugging information.

There aren't that many developers working with HTML5 Canvas, but those who are will be very excited about a new tool in Chrome. Google's browser is now capable of inspecting canvas elements, providing developers with very useful debugging information.

The feature is still experimental, so it's not enabled by default. You'll first have to enable the "developer tools experiments" flag.

Then, in dev tools, go to the settings menu, via the cog icon, select the Experiments tab, and then check "Canvas inspection." Reload the dev tools and you're ready to go. If you're having problems enabling it, Google has more details on HTML5 Rocks.

You'll spot the Canvas profiler on the Profiles tab. On any page that has a canvas element, you'll be able to capture single frames or several of them in order. You'll then be able to go through all the frames, one at a time, and see all the drawing taking place. 

Comments