默认情况下，这些工具会在Chrome窗口的底部打开。对于宽屏显示而言，这是一个相当糟糕的选择，因为右侧有很多空白空间，但没有太多垂直空间可保留。不幸的是，我找不到重新定位工具的方法。我想把它们放在一边，类似于萤火虫。

与我想要的唯一类似的选择是分离开发工具，并将chrome和工具窗口并排放置。但是，这对于从IDE到浏览器并向后快速alt切换不是很方便，因此“集成”解决方案将是不错的选择。

Chrome 46或更高版本

单击垂直省略号按钮（⋮），然后选择所需的对接选项。

Chrome 45或更旧版本

长按右上角的Dock图标。它弹出一个更改对接的选项

要更改HTML和CSS面板之间的分隔，请在DevTools中进入“设置（F1）”>“常规”>“外观”>“面板布局”。

将鼠标指针放在停靠按钮上，然后长按它（几秒钟）或按鼠标左键和右键单击，具体取决于浏览器的版本。

键盘快捷键可切换停靠位置（侧面/底部）

CTRL+ SHIFT+D

您可以通过以下方法查看许多快捷方式

设置»快捷方式，如下所示：

或者，使用CTRL+ ?转到设置，从那里可以到达左侧的“快捷方式”子项目或使用官方参考。

看起来这像是现在在左下角的图标，带有重叠的窗口和“取消停靠到单独的窗口中”。工具提示。

在将扩展坞放置在右侧之后（请参阅旧的答案），我仍然发现面板垂直分开。

要水平拆分面板-甚至从屏幕宽度中获取更多信息-转到“设置”（右下角），然后取消选中“停靠在右侧时垂直拆分面板”。

现在，您具有从左到右的所有面板：p

截至2014年10月，版本39.0.2171.27 Beta（64位）

我需要进入Chrome Web Developper 面板，进入“设置”，并在停靠到右侧时取消垂直选中“ 拆分面板 ”

我现在使用的版本56.0.2924.87，如果您不在桌面上，则会自动撤消DevTools。否则，打开一个新的新Chrome选项卡，然后检查将DevTools停靠在窗口中。

此外，如果要在一个窗口上查看“源和控制台”，请转到：

“定制和控制DevTools->“显示控制台抽屉”

您也可以在右上角看到它：