Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 941
shekhardtu Avatar asked Jul 27 '17 18:07

shekhardtu


People also ask

How do I save css changes of styles panel of Chrome developer tools?

To save your changes, press CTRL + S when editing the file.

How can I see the css code in Chrome?

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.

How do I enable the dock side in Chrome?

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.


2 Answers

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

like image 59
k sarath Avatar answered Sep 28 '22 03:09

k sarath


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.

like image 33
Kayce Basques Avatar answered Sep 28 '22 01:09

Kayce Basques