Debug canvas with chrome development tools

Source: Internet
Author: User
Tags chrome devtools

Whether you are using 2D or webgl, anyone who has used <canvas> knows that debugging is difficult. Using canvas usually requires a long list of calls that are difficult to trace.

function draw() {  context.clearRect(0, 0, 258, 258);  context.fillStyle = "#EEEEEE";  context.beginPath();  context.arc(129, 129, 127, 0, 6.28, true);  context.closePath();  context.fill();  // … and on and on}
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
Code laycode-V1.1

Sometimes you need to capture the commands sent to the canvas context and trace them step by step. Fortunately, Chrome's devtools provides the canvas checker. This new feature allows us to debug the canvas.

This article describes how to use this feature to debug your canvas code. This checker supports both 2D and webgl, so no matter which one you use, you can directly obtain useful debugging information.


First, go to the about: Flags interface of the Chrome browser and activate the option "enable developer tool experiment"

Then, click the gear button (in the upper right corner) on the devtools interface to go to experiments and check the canvas inspection option.

You need to restart devtool (you can use Alt + R or option + r). After devtools is restarted, enter the profiles interface, you can see the new canvas profiler option. You will notice that the canvas profiler is invalid at the beginning. To debug the canvas element on the page, you only need to click the Enable button, the page will be reloaded and ready to capture the <canvas> call

You can capture a single frame or consecutive frame. The frame information can also be seen in the timeline of devtools.

A frame represents a page event cycle. This includes script running, event processing, Dom Update, style effectiveness, layout, and re-drawing pages. To ensure smooth animation, the time of each frame should be less than 1/60 seconds, that is, 16.6 milliseconds.

A single frame is captured and stops at the end of each frame.

Continuous Frame capture only stops when you tell him. The mode you choose depends on how you use <canvas>. For a continuous animation, you may want to capture each frame, for transient animations triggered in response to user interaction, you may need to capture Consecutive Frames.

Select the frame listening type, and then we are ready to start capturing.

Frame capture event

You only need to click Start and then operate your application normally. After a while, return to the devtools interface and click STOP. Now you can see a new profile that contains the number of calls to all captured <canvas> elements. Click this profile to see the following interface:

In the panel below, you can see all captured frames. You can click each frame to see the gradual painting process. If you have multiple <canvas> elements, you can select one of them.

Inside each frame, you can see the draw call group. Each group contains a draw call (at the end of the Group). What is a draw call? For 2D context, clearrect (), drawimage (), fill (), stroke (), putimagedata (), or any text painting method, for webgl, clear (), drawarrays () or drawelements (), essentially any operation that changes the currently drawn buffer content (if the canvas is invisible, you can imagine it as an operation on the cached Bitmap) you can view every step of the rendering process. You can view the rendering effect of the current position at each selection, so that you can easily and quickly locate bugs.

Discover differences

Another useful function is to view the parameters and attribute changes of the two calls. You only need to click the sidebar button to view a new attribute view, you can see the property update when calling each draw step. You can move the cursor over the property value to see the detailed content or array information.


Now you know how to use Chrome devtools to debug your canvas. If you have any feedback on the canvas debugging tool, submit a bug or post it to chrome devtools group, if you find a bug or want to see any other information during debugging <canvas>, contact us because the chrome tool can be used more effectively only through feedback from developers.

Use Chrome development tools to debug canvas)

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.