How to move the CSS Styles part to the bottom in Chrome Devtools?

user_12305583 0
Viewed 1271

When i go to Inspect on Google Chrome, i have the HTML and CSS sections in parallel as shown below.

enter image description here

How can i move the CSS part to the bottom while keeping the HTML part above, as shown below?

enter image description here

inspect google-chrome-devtools google-chrome css styles
4 Answers

Click the nail > Set 'Panel layout' to horizontal

enter image description here Here is where you are gonna set your panel horizontal enter image description here I hope helped you.

user_146598020

I had the same question this evening. All the answers I found kept trying to describe how to move the entire Dev Tools panel. But what you and I actually want is to adjust the inner panels.

Here is what I did:

  1. Click on the settings GEAR in the upper right-hand corner of Developer Tools. It's the little donut-looking thing. This will bring up a full-screen SETTINGS panel.
  2. Click on the PREFERENCES option (if it isn't already selected).
  3. In the APPEARANCE option group, look for the Panel layout dropdown.
  4. Change the Panel layout selection to horizontal.

That did it for me this evening. Hope it helps you.

Sorry, I'm not including screenshots — I've got to get back to work!

user_86296610

First, you need click 3 dots. Then you select your desired dock side.

enter image description here

user_121602690

you need to click 3 dot on right side of devTools and select dock side enter image description here

user_37626100
Related