Undock Chrome Developer Tools

google-chrome google-chrome-devtools
Jeremi Stadler picture Jeremi Stadler · Nov 26, 2013 · Viewed 48.7k times · Source

How do I undock the Chrome Developer Tools in Chrome? Pressing the left bottom corner just moves it to the right side.

Chrome Corner
(source: github.io)

Answer

DarkWanderer picture DarkWanderer · Nov 26, 2013

Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option. (the docking option with the red circle around it, is undock)

For older version of Chrome, press and hold the corner button

You can also undock/dock-to-left/dock-to-right/dock-to-bottom from the Command Menu. Press Cmd+Shift+P (Mac) or Cmd+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu, then start typing bottom/left/right/undock.

undocking via command menu

DevTools documentation on docking: https://developers.google.com/web/tools/chrome-devtools/ui#placement

Related questions

Disabling Chrome cache for website development

I am modifying a site's appearance (CSS modifications) but can't see the result on Chrome because of annoying persistent cache. I tried Shift+refresh but it doesn't work. How can I disable the cache temporarily or refresh the page in …

Read More
How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
"CAUTION: provisional headers are shown" in Chrome debugger

I noticed a strange caution message when looking at downloaded resources using Google chrome inspector (F12): Caution provisional headers are shown I found something possibly relevant, Network Panel: add caution about provisional request headers, but I could not fully understand …

Read More