How to reposition Chrome Developer Tools

Question

The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.

The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.

http://stackoverflow.com/questions/14386994/chrome-24-how-to-dock-devtools-to-the-right — Nate, Mar 25 '13 at 13:19

score 909 · Accepted Answer · edited Feb 08 '17 at 14:35

909

Chrome 46 or newer

Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.

Chrome 45 or older

Long-hold the dock icon in the top right. It pops up an option to change the docking

To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.

edited Feb 08 '17 at 14:35

Community

1
1

answered Apr 05 '12 at 20:20

loislo

13,657
1
26
24

2

Cool, it is present in the stable version, i simply wasn't aware of it, has even more nice options :) Thanks – kostja Apr 06 '12 at 07:55
8

in recent builds of chrome and canary, the option has been removed but you can still access it by clicking and holding the dock icon in the bottom left, it pops up an option to dock to right. – Paul Spencer Nov 08 '12 at 15:33
3

Cool, dock to right works. Now how do I move the CSS inspector on the Elements tab to the bottom of the dev tools pane? Otherwise I have to view the HTML and the CSS side-by-side in very narrow columns. – Vicky Chijwani Dec 20 '12 at 06:20
1

@VickyChijwani You should enable 'Allow horizontal split in Elements and Sources panels' in Experiment under Dev tool settings, and right click on style pane to get it bottom. – Manoharan May 13 '13 at 14:08
I couldn't find it because now it is in the top right corner. However, works. – fracz Feb 07 '14 at 19:17
1

I notice that the dock icon is not available when I attempt to inspect an element when using telerik mobile device simulator (http://docs.telerik.com/platform/appbuilder/testing-your-app/running-apps-in-simulator/device-simulator) in chrome Version 33.0.1750.117 m – Daniel Dropik Mar 03 '14 at 02:31
11

What a horrible design! Nowhere would I figure it out by myself. Nowhere else I've seen this hold and wait ever used. – Dmitri Zaitsev Apr 14 '14 at 12:04
This is a pure example of what *not* to do if you want to make something user-friendly. This is not google's habits to make such things. Strange. – Olivier Pons Dec 10 '14 at 15:34
4

@blrbr Yeah so true. If you need to do a google search just to find out how to activate an option you know exists, there is something wrong with the UI design. The keyword here is 'discoverability'. This is not discoverable easy. – Stijn de Witt Apr 26 '15 at 11:55
+1. This makes no sense at all. There is no way anyone will ever know this unless they google for this :), then again, this user interface is most likely made by developers, not by ux people. – Erti-Chris Eelmaa Oct 09 '15 at 11:31
The ellipsis button exists, but the "Dock side" menu item was missing for me. My browser window was missing the toolbar, status bar, menu bar etc. After I opened that URL in new browser window with all of the normal controls, the "Dock side" menu item was available in the ellipsis menu. – Tim Partridge Oct 30 '15 at 14:09
I can split the html/css horizontal, but what about the networks panel? it used to work but now it is always vertical. – koox00 Jan 20 '16 at 11:13
@RenaissanceProgrammer I would like the dock on the left too, because if you have a large screen and you work a lot with javascript but you don't need to see precisly what happens to the html page but only you need to see few detail, the dock on the left give to the dev panel more visibility. I have found this [post](http://stackoverflow.com/a/35227549/1373229) where is explained why google don't interest to implement this feature. – jedi Mar 23 '16 at 10:23
@jedi that seems like a strange excuse, what about countries where they read from right to left, the page is designed with top right being 0,0... idk seems like laziness rather than a real reason – RenaissanceProgrammer Mar 23 '16 at 21:45
1

@loislo and for chrome 60? – user2284570 May 18 '17 at 11:14
To move styles panel to the bottom: Devtools settings > Preferences > Appearance > Panel layout = horizontal. – batbrain9392 Aug 13 '20 at 07:52

score 70 · Answer 2 · edited Jan 28 '14 at 20:32

70

Place your pointer on the dock button and long click it (some seconds) or right & left mouse click depending on the browser version.

enter image description here

edited Jan 28 '14 at 20:32

Alexandre Marcondes

5,428
2
22
31

answered Jan 28 '14 at 19:58

user3246105

701
5
2

score 42 · Answer 3 · edited Apr 14 '15 at 12:05

42

Keyboard shortcut to toggle the docking position (side/bottom)

CTRL+SHIFT+D

And there are many shortcuts you can see them by going to

Settings » Shortcuts, as displayed here:
Settings screenshot

Alternatively, use CTRL + ? to go to the settings, from there one can reach the "Shortcuts" sub-item on the left or use the Official reference.

edited Apr 14 '15 at 12:05

Dr1Ku

2,690
3
43
52

answered Mar 24 '15 at 02:00

Alupotha

8,014
4
43
45

6

⌘-Shift-D on OSX, too. – meatspace May 13 '16 at 14:41
2

If you can't open the dock at all, try `Ctrl+Shift+I` -- but if your window is a popup, I don't think docking even works. – Noumenon Oct 04 '16 at 13:35
Thank you! The Inspector was somehow stuck WAY off screen, CTRL+SHIFT+D docked it for me! – Stan Jan 20 '17 at 18:40
1

For some reason when I undock the Chrome developer tools, the tool seems to run off to the right of my monitor and is no longer visible. The only way I can get it to re-appear is Ctrl+Shift+D and dock the developer tools to the side or bottom. This is weird – jazzBox Feb 28 '17 at 14:36
I'd just like to declare my love for you. – Curtis Blackwell Mar 07 '19 at 20:41

score 18 · Answer 4 · answered Nov 03 '12 at 22:19

18

Looks like this is on the bottom left now as an icon with overlapping windows and the "Undock into separate window." tooltip.

enter image description here

answered Nov 03 '12 at 22:19

brian_d

10,694
4
43
72

13

You could clarify that you have to click AND HOLD this button in order to dock to the right. As @PaulSpencer noticed, simply clicking only undocks. – 0x89 Nov 16 '12 at 13:38

score 11 · Answer 5 · answered Jun 06 '13 at 09:15

After I have placed my dock to the right (see older answers), I still found the panels split vertically.

To split the panels horizontally - and even got more from your screen width - go to Settings (bottom right corner), and remove the check on 'Split panels vertically when docked to right'.

Now, you have all panels from left to right :p

score 8 · Answer 6 · answered Oct 16 '14 at 11:28

8

As of october 2014, Version 39.0.2171.27 beta (64-bit)

I needed to go in the Chrome Web Developper pan into "Settings" and uncheck Split panels vertically when docked to right

answered Oct 16 '14 at 11:28

Pierre Maoui

5,000
1
20
25

score 1 · Answer 7 · answered Mar 30 '17 at 13:01

1

The Version 56.0.2924.87 which I am in now, Undocks the DevTools automatically if you are NOT in a desktop. Otherwise Open a NEW new Chrome tab and Inspect to Dock the DevTools back into the window.

answered Mar 30 '17 at 13:01

Charix

29
2

What do you mean "not in a desktop"? I am on 59.0.3067.6 (dev) and it's doing some strange things on certain websites. For example in Vtiger 6.5, right clicking and "inspect" opens dev tools in a new window that lacks the "Dock side" choice, however using F12 opens it normally embedded in the current tab with the "Dock side" choice available. Strange. – dhaupin Apr 14 '17 at 18:29

score 0 · Answer 8 · edited Nov 13 '18 at 09:52

0

In addition, if you want to see Sources and Console on one window, go to:

"Customize and control DevTools -> "Show console drawer"

You can also see it here at the right corner:

edited Nov 13 '18 at 09:52

MBT

14,333
16
60
88

answered Nov 13 '18 at 06:25

Anton Polkanov

172
9

score 0 · Answer 9 · answered Jan 30 '21 at 23:37

If you use Windows, there some shortcuts, while devtools are opened:

Pressing Ctrl+Shift+D will dock all devtools to left, right, bottom in turn.

Press Ctrl+Shift+F if your JS console disappeared, and you want it docked back to bottom within dev tools.

How to reposition Chrome Developer Tools

9 Answers9

Chrome 46 or newer

Chrome 45 or older

Keyboard shortcut to toggle the docking position (side/bottom)

Linked