Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome dev tools - How to merge "styles" and "computed" tabs together?

I'm getting 2 different tabs for "styles" and "computed" in dev tools. Earlier they were in a single tab and I'm more comfortable with that view.

How can I get that layout back?

I have tried re-sizing the width of dev tools section, it didn't work.

Desired Layout

Current Layout

like image 616
thewebtud Avatar asked Sep 06 '20 12:09

thewebtud


Video Answer


3 Answers

Thanks @wOxxOm.

Looks like this is the new intended behaviour in devtools.

What's New In DevTools (Chrome 85)

like image 150
thewebtud Avatar answered Oct 24 '22 07:10

thewebtud


It looks like the developers are coming up with a solution after the community spoke up:

View the issue thread

like image 25
Tarfoot Avatar answered Oct 24 '22 07:10

Tarfoot


You can't anymore as of July 2020, since it seems like an intended new behavior as of the Chrome 85 Update.

An alternative solution that has a similar display is the Firefox Developer Edition Web Developer Tools.

It looks similar to how Chrome Developer Tools used to look.

Firefox Developer Edition - Web Developer Tools: enter image description here

like image 32
McClint Avatar answered Oct 24 '22 08:10

McClint