By inspecting this stack, a developer can trace the call back to the higher level function invoked by the app or engine that caused something to be drawn.Ĭertain types of Canvas context functions are highlighted to make them easier to spot in the snapshot. Each frame snapshot contains a list of context method calls and the associated JavaScript stack.
It records all canvas context method calls. The Canvas Debugger works by creating a snapshot of everything that happens while rendering a frame. The Canvas Debugger is designed to let you view the rendering calls from the perspective of the animation loop itself, giving you a much better overview of what’s happening. However, this can be difficult as it becomes a manual search for all of the various canvas methods you may wish to step through. You can debug an animation using a traditional debugger, like our own JavaScript Debugger in Firefox’ Developer Tools. It will let you debug either a WebGL or 2D Canvas context. Whether you’re creating a visualization, animation or debugging a game, this tool will help you understand and optimize your animation loop. It’s a tool for debugging animation frames rendered on a Canvas element. To enable this feature in Firefox, go to about:config and create a new Boolean preference with the name of _flashing and set the preference to true.The Canvas Debugger is a new tool we’ll be demoing at the Game Developers Conference in San Francisco.
Paint flashing was required to find this inefficiency, and it will also be the tool that we will thank for finding many other inefficiencies as we move forward. Modifying the markup for the controls can fix this and improve the performance of the controls. Regions experiencing heavy paint flashing can turn your browser in to a fun rave, but also show web developers (and browser developers too!) areas of the code that aren’t being as optimal as possible.įor example, there is currently a bug on file for Firefox where the HTML5 video controls cause unnecessary paint flashing ( bug 722261). Whenever the layout engine determines that a region of the browser requires repainting, the region is tinted with a random color value. Make sure that you have Firefox 11 or higher installed (Beta, Aurora, or Nightly).
0 kommentar(er)
