26

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

Moudinho
  • 309
  • 4
  • 6
  • 2
    Does this answer your question? [How to reposition Chrome Developer Tools](https://stackoverflow.com/questions/10023640/how-to-reposition-chrome-developer-tools) – wOxxOm Jan 02 '22 at 08:31
  • You should accept an answer, someone took the time to tell us fools how to do it, pay some respect. – Flecibel Oct 28 '22 at 04:35

5 Answers5

53

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.

Alexandro Pineda
  • 706
  • 3
  • 10
7

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!

Clark Dowding
  • 73
  • 4
  • The "I need to get back to work" part is unnecessary. You don't need to apologise for not including screenshots, as the question asker has not explicitly requested it. Not condemning you, just giving some tips on how to answer. Other than that, good work! – Agent Biscutt Jan 09 '22 at 06:36
  • Thank you, Clark! And good luck at work, pal! You can find the same answer above from @alexandrupineda – Moudinho Jan 10 '22 at 06:57
  • Agent Biscutt, thanks for explaining your idea of how stackoverflow and the internet should work. I liked Clark's personal touch. It's a reminder that we are people with personalities, not AI drones here to dole out dry answers. – John Jul 28 '22 at 15:45
0

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

enter image description here

Rafael Tavares
  • 5,678
  • 4
  • 32
  • 48
Samsul
  • 21
  • 8
  • 2
    This option will move the whole console to the bottom. What i need is to move only the CSS part to the bottom of the HTML one as i described in my screenshot. I don't want to change the lateral view of the whole console. – Moudinho Jan 02 '22 at 09:46
0

1: Right Click, Open Inspect

2: Top Right Corner, Click 'Gear Icon' (Preferences Menu)

3: Top Left Preferences Tab, Choose 'Horizontal' For 'Panel Layout'

4: Close the Preferences Menu, In Main Inspect
Window, Close Console Tab

5: HTML Elements will be on top of menu, CSS Selectors will be on bottom of Menu

Timothy Cook
  • 1
  • 1
-1

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

rakhmatov
  • 369
  • 3
  • 9