CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
shekhardtu
shekhardtu

Reputation: 5368

How to hide style section in chrome dev tools?

enter image description here

How to hide the right bottom section (style section) of dev tools?

Upvotes: 39

Views: 15099

Answers (4)

at00
at00

Reputation: 53

since the chatbots haven't figured this one out, here's how to get rid of the annoying Styles pane for chromium:

  • Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open dev tools.
  • Click the settings icon
  • Under "Panel layout" select horizontal

the extra pane will now be at the bottom, height-adjustable.

Upvotes: 1

Nicky Gee
Nicky Gee

Reputation: 46

I've found that you can collapse the sidebar more when you selected computed rather than styles. Styles has too large of a minimum width and the computed tab collapses to the size of the chevron icon.

Computed tab collapsed: Computed tab collapsed screenshot

Selection of computed tab: selection of computed tab screenshot

Upvotes: 3

k sarath
k sarath

Reputation: 799

By default, this is the way it is placed Default

But from the settings -> preferences -> Panel layout -> "Horizontal" Panel Layout

With this option, we can bring the style pane to the bottom to bottom

Upvotes: 31

Kayce Basques
Kayce Basques

Reputation: 25897

There's no way to hide it. You can resize it so that it's pushed off to the side, as wOxxOm mentioned.

enter image description here

Here's a different UI setup that you may prefer:

If you undock your DevTools window and make it narrow, the Styles pane moves below the DOM Tree. From there, you can minimize it.

enter image description here

You can also achieve this UI setup just by making your DevTools window more narrow. You don't have to undock it.

Upvotes: 15

Related Questions