Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No paint profiler in Chrome DevTools

I'm trying to use the Chrome devtools timeline to improve animation performances, but I can't find the Paint Profiler. I recorded some seconds of an animation and then clicked on a paint event in the timeline, as described here, basically: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool#profile-painting

But I don't see any Paint Profiler tab.

Here's how I see the console window:

enter image description here

I'm using Google Chrome Version 51.0.2704.106 (64-bit), on a Mac

like image 816
Carlo Avatar asked Jul 18 '16 13:07

Carlo


People also ask

How do I use DevTools profiler on Chrome?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.

How do I change DevTools color in Chrome?

Changing the color theme from Settings Open DevTools, and then select Settings (the gear icon). Select Preferences, and then in the Appearance section, select a theme from the Theme dropdown list.

How do I fix dev tools in Chrome?

# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.


1 Answers

Updated at 2021 April

The feature is still exist confirmed in Version Version Version 89.0.4389.114 (Official Build) (arm64)

enter image description here

Updated at 20180806

It becomes even harder to find in Version 68.0.3440.84 (Official Build) (64-bit). Follow the steps below to find the paint profiler in Google Chrome development tool.

  1. Enable "Advanced paint instrumentation (slow)"

enter image description here

  1. Record a timeline
  2. Find a paint block and click on that block

enter image description here

  1. Click the "Paint Profiler" inside Preview section

enter image description here

  1. Here is the "Paint Profiler" you are looking for.

enter image description here

like image 51
X.Creates Avatar answered Oct 20 '22 17:10

X.Creates