How to hide style section in chrome dev tools?

Question

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

Conundrum

You can resize it. Maybe there's a way to hide it by writing a custom devtools theme, but I'm not sure it'll work because devtools uses shadow DOM. – Planarian

Answer 1

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:

Selection of computed tab:

Outrigger

This is a funny one, but it does seem that the computed tab gets closest to hiding the panel completely. – Nodule

Answer 2

By default, this is the way it is placed

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

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

Lingam

Thank you! Its a shame that auto is ON by default and doing its semi-random resizing. Also a shotout to chrome-devs it is actually NOT that easy to find this out inside the preferences.. – Pronation

2023; does not work anymore. – Ki

as of May 2023 it is working now, Version 113.0.5672.93 – Mailbox

Answer 3

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

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.

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

Doctrine

Thanks, Kayce. I was expecting if there is any way to hide because while using js console and Elements tabs, I really don't find the usefulness of styles drawer. – Conundrum

There's also an entire tab dedicated to the Console. Click Console (next to Elements in the screenshot in my answer) to open it. Does that help? – Doctrine

Yeah, that right but I had to use both console and elements tab for some DOM manipulation. – Conundrum

Link rot. You linked to something to explain how it solves a problem, without ever saying what that thing is, and now that link doesn't explain anything anymore. – Ki

Answer 4

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.

Interurban