Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome devtools change layout of Elements tab

I have vertical monitor and I want to change the layout of Elements tab. Is it possible to put Styles sidebar to bottom? Have a look at screenshot: enter image description here

like image 948
Vladyslav K Avatar asked Jul 17 '17 08:07

Vladyslav K


People also ask

How do I change the layout of Inspect Element in Chrome?

Go to Settings > update the panel layout based on your preference. For example, the Styles pane in the Elements panel will move from the side to the bottom when screen size is small. If you want the Style pane to always stay on the side, change the panel layout to vertical.

How do I change the layout of inspect element?

You can also use the keyboard shortcut Ctrl+Shift+I to access Inspect Element. The Firefox inspector appears at the bottom of the window by default. To change its location, click the three-dots menu on the panel's upper right corner and choose another display option.

How do I change DevTools layout?

In the developer tools, klick the cogwheel icon (or press F1 when focusing the dev tools) to open the settings overlay. Under "Preferences", in the "Appearance" section, find the "Panel layout" option. Set it to your liking.

How do I change my position on DevTools?

Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS.


2 Answers

Click the menu bar in the top right corner. Goto settings => preferences. Under the appearance setting there is an option called panel layout which allows you to change the layout.

https://makandracards.com/makandra/41536-how-to-force-horizontal-panel-layout-for-chrome

like image 195
JSON Avatar answered Oct 06 '22 08:10

JSON


In Chrome DevTools Tab, At Top-Right Corner, Go To Dropdown -> Settings -> Click on Restore Defaults. It will work..

like image 28
Shreyas Kheni Avatar answered Oct 06 '22 10:10

Shreyas Kheni