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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[google-chrome] How to reposition Chrome Developer Tools

Examples related to google-chrome

Examples related to google-chrome-devtools