How to reposition Chrome Developer Tools How to reposition Chrome Developer Tools google-chrome google-chrome

How to reposition Chrome Developer Tools

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.

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 enter image description here

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


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.