如何重新定位Chrome开发者工具

Question

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

唯一类似于我想要的选项是分离开发工具并将chrome和工具窗口并排放置。这对于从IDE到浏览器的快速alt-tabbing并不是很方便，但是这样一个＆＃34;集成了＆＃34;解决方案会很好。

Answer 1

Chrome 46或更新版

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

Chrome 45或更早版

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

要更改HTML和CSS面板之间的分割，请转到DevTools到设置（F1）＆gt;一般＆gt;外观＆gt;面板布局。

Answer 2

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

Answer 3

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

的 CTRL + 的 SHIFT + 的 d

您可以通过

看到许多快捷方式

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

或者，使用 CTRL + ？转到设置，从那里可以到达“快捷方式”子项目离开或使用Official reference。

Answer 4

现在看起来这个位于左下角，作为一个图标，窗口重叠，“Undock into separate window”。工具提示。

Answer 5

在我将底座放到右侧后（请参阅较旧的答案），我仍然发现面板垂直分割。

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

  

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

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

Answer 9

如果你使用 Windows，有一些快捷方式，而 devtools 是打开的：

按 Ctrl+Shift+D 会将所有开发工具依次停靠在左侧、右侧、底部。

如果您的 JS 控制台消失了，并且您希望它停靠在开发工具中的底部，请按 Ctrl+Shift+F。 >