如何重新定位 Chrome 开发者工具
默认情况下，这些工具会在 chrome 窗口的底部打开。对于宽屏显示器来说，这是一个相当糟糕的选择，因为右边有很多空白空间，但没有多少垂直空间可以腾出。不幸的是，我没有找到重新定位工具的方法。我想把它们放在一边，类似于萤火虫。
与我想要的类似的唯一选择是分离开发工具并将 chrome 和工具窗口并排放置。这对于从 IDE 到浏览器并返回的快速 alt-tabbing 不是很方便，因此“集成”解决方案会很好。
Chrome 46 或更新版本
单击垂直省略号按钮 ( ⋮ )，然后选择所需的停靠选项。
https://i.stack.imgur.com/xZcUW.png
Chrome 45 或更早版本
长按右上角的停靠图标。它会弹出一个更改对接的选项
https://paulirish.com/i/c34b30.png
要更改 HTML 和 CSS 面板之间的拆分，请在 DevTools 中转到设置 (F1) > 常规 > 外观 > 面板布局。
将您的指针放在停靠按钮上并长按（几秒钟）或鼠标左键单击，具体取决于浏览器版本。
https://i.stack.imgur.com/LG4Os.png
切换停靠位置（侧面/底部）的键盘快捷键
CTRL+SHIFT+D
并且有许多快捷方式，您可以通过以下方式查看它们
https://i.stack.imgur.com/GvB8M.jpg
或者，使用 CTRL + ? 进入设置，从那里可以到达左侧的“快捷方式”子项或使用Official reference。
Ctrl+Shift+I - 但如果您的窗口是弹出窗口，我认为停靠栏甚至不起作用。
看起来这现在在左下角，作为一个带有重叠窗口的图标和“取消停靠到单独的窗口”。工具提示。
https://i.stack.imgur.com/qLGkc.jpg
将扩展坞放在右侧后（请参阅较早的答案），我仍然发现面板垂直拆分。
要水平拆分面板 - 甚至从屏幕宽度中获得更多 - 转到设置（右下角），然后取消选中“停靠到右侧时垂直拆分面板”。
现在，您拥有从左到右的所有面板：p
截至 2014 年 10 月，版本 39.0.2171.27 beta（64 位）
我需要在 Chrome Web Developer 中进入“设置”并在停靠到右侧时取消选中垂直拆分面板
我现在使用的版本 56.0.2924.87，如果您不在桌面中，则会自动取消停靠 DevTools。否则打开一个新的新 Chrome 选项卡并检查以将 DevTools 停靠回窗口。
如果您使用 Windows，则在打开 devtools 时有一些快捷方式：
按 Ctrl+Shift+D 会将所有开发工具依次停靠在左、右、下。
如果您的 JS 控制台消失了，并且您希望它在开发工具中停靠回底部，请按 Ctrl+Shift+F。
此外，如果您想在一个窗口中查看 Sources 和 Console，请访问：
“自定义和控制 DevTools -> “显示控制台抽屉”
您也可以在右上角看到它：
https://i.stack.imgur.com/WDWIT.png
