How to hide the right bottom section (style section) of dev tools?
To save your changes, press CTRL + S when editing the file.
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
You can also change the Chrome DevTools dock position. You can either undock into a separate window, or dock it on the left, bottom, or right side of the browser. The dock position can be changed by pressing Cmd + Shift + D ( Ctrl + Shift + D ) or through the menu.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With