In Chrome Developer Tools, how can I disable the highlight around elements that refresh?

Question

In a ReactJS application, I have the Chrome Developer Tools open

When I click on something I can see highlight around elements that refresh.

How can I disable the highlight so I can use the iPhoneX emulator without ugly highlight everywhere all the time?

Answer 1

It's been changed at devtools v4, asked at Aug 17, 2019 and updated at Oct 3, 2019

(For React version < 15, use devtools v3 instead)

Refer:

• related issue: https://github.com/facebook/react/issues/16437

• related PR: https://github.com/facebook/react/pull/16989

---

This is how you do:

1. F12 to open the developer tools
2. Click on the Components tab
3. Within the react tree, on the upper right corner, click on the settings icon
4. Click on General tab
5. Uncheck Highlight updates when components render