How to reposition Chrome Developer Tools
Google ChromeGoogle Chrome-DevtoolsGoogle Chrome Problem Overview
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.
Google Chrome Solutions
Solution 1 - Google Chrome
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.
Solution 2 - Google Chrome
Place your pointer on the dock button and long click it (some seconds) or right & left mouse click depending on the browser version.
Solution 3 - Google Chrome
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:
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.
Solution 4 - Google Chrome
Looks like this is on the bottom left now as an icon with overlapping windows and the "Undock into separate window." tooltip.
Solution 5 - Google Chrome
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
Solution 6 - Google Chrome
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
Solution 7 - Google Chrome
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.
Solution 8 - Google Chrome
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.