Chrome DevTools does not have a profiler

Question

I am trying to use Chrome timeline devtools to improve animation performance, but I can not find Paint Profiler . I recorded a few seconds of animation, and then clicked on a drawing event on the timeline, as described here, basically: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool # profile-painting

But I do not see the Paint Profiler tab.

This is how I see the console window:

I am using Google Chrome version 51.0.2704.106 (64-bit) on Mac

Answer 1

Updated in 20190316

The function still exists, confirmed in version 72.0.3626.121 (Official Build) (64-bit version).

Updated in 20180806

In version 68.0.3440.84 (Official Build) (64-bit version) it becomes even more difficult. Follow the steps below to find the paint profiler in the Google Chrome Development Tool.

1) Enable "Advanced drawing tools (slow)"

2) Record the timeline. 3) Find the paint block and click on this block.

4) Click "Paint Profiler" in the preview section .

5) Here is the "Paint Profiler" you are looking for.

Answer 2

July 8, 2017 Patch:

The behavior here has changed in newer versions of Chrome. See Lee's answer now.

---

Old answer:

First, click on the Paint event on the Event Log tab. On the right side you will see a preview section with a Paint Profiler link, as shown below:

As soon as you click on the link, a tab will appear next to the "Event Log" tab, as shown below:

Answer 3

In fact, you do not need to refresh the page. After the page is loaded and the Paint profile panel does not appear, you simply Ctrl + f and enter the paint and it will appear. Depending on your computer hardware, it takes a few seconds before the recording is finally downloaded, even if you view it (Ctrl + f). Wait a few seconds, and then find the paint, you do not need to be updated!