Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where did Rendering go in Chrome DevTools?

Looks like the Rendering settings aren't where they used to be (i.e. enable paint flashing, show layer borders, show FPS meter, Show scrolling perf issues).

How can I access those features again?

like image 589
Paul Bakaus Avatar asked Oct 22 '15 22:10

Paul Bakaus


People also ask

How do I see animations in Google Chrome dev tools?

Once you have the devtools open (option + cmd + i on Mac), you can find the Animations tab by clicking the “Customize and Control Devtools” icon on the right side of the panel. Then go to “More tools”, then “Animations”.

Where is Chrome's developer menu?

Chrome. To open the developer console window on Chrome, use the keyboard shortcut Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Alternatively, you can use the Chrome menu in the browser window, select the option "More Tools," and then select "Developer Tools."

How do I change DevTools position in Chrome?

Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom.


2 Answers

The Rendering settings have been moved as of Chrome 48. You can now access them via three-dots menu icon, More Tools, Rendering Settings.

Moved Rendering Settings

Alternatively, you can access it via the bottom pane's new menu:

enter image description here

like image 104
Paul Bakaus Avatar answered Oct 22 '22 06:10

Paul Bakaus


On Windows Chrome 70.0. Open devtools: CTRL + SHIFT + J.

Then click on vertical menu button highlighted below.

like image 43
phtn458 Avatar answered Oct 22 '22 08:10

phtn458