logo标签列表

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

google-chromegoogle-chrome-devtools
509

默认情况下，工具栏位于Chrome窗口底部。这对于宽屏幕显示器来说是一个相当糟糕的选择，因为右侧有大量空白空间，但垂直空间不多。不幸的是，我没有找到重新定位工具栏的方法。我希望将它们放在侧边，类似于Firebug。

与我想要的类似的唯一选项是分离开发工具并将Chrome和工具窗口并排放置。然而，这对于快速地从IDE切换到浏览器并返回并不是很方便，因此“集成”解决方案会很好。

https://github.com/melat0nin/chrome-devtools-vertical - Raghav
https://dev59.com/EmYq5IYBdhLWcg3wjBUM - Nate
9个回答
925

Chrome 46或更新版本

点击垂直省略号按钮（⋮），然后选择所需的停靠选项。

Chrome 45或更早版本

长按右上角的停靠图标，它会弹出一个选项来更改停靠位置。

要更改HTML和CSS面板之间的分割，请在开发者工具中转到设置（F1）>常规>外观>面板布局。

2
很酷，它在稳定版本中存在，我只是不知道它，甚至有更多好的选项 :) 谢谢 - kostja
8
在最近的 Chrome 和 Canary 构建版本中，该选项已被移除，但您仍然可以通过点击并按住左下角的 Dock 图标来访问它，它会弹出一个选项以将其停靠到右侧。 - Paul Spencer
3
好的，将调整到右侧已完成。现在如何将“CSS Inspector”移动到开发工具面板底部的“Elements”标签中？否则，我必须在非常窄的列中并排查看HTML和CSS。 - Vicky Chijwani
11
设计太糟糕了！我自己无论在哪里都看不懂。我从未见过其他地方使用过这种"等待"功能。 - Dmitri Zaitsev
4
是的，非常正确。如果您需要进行谷歌搜索才能找到如何激活您知道存在的选项，那么界面设计肯定有问题。关键词在于“易发现性”。这并不容易被发现。 - Stijn de Witt
显示剩余11条评论
70

将您的光标放在dock按钮上并长按（几秒钟），或根据浏览器版本右键或左键单击。

输入图像描述 输入图像描述

48

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

CTRL+SHIFT+D

还有许多快捷键，您可以通过前往设置 » 快捷方式来查看它们，如下所示：
设置截图

或者，使用CTRL + ?进入设置页面，从那里可以在左侧找到“快捷方式”子项，或使用官方参考文档进行操作。

6
在苹果电脑上，也可以使用⌘-Shift-D。 - meatspace
2
如果您完全无法打开Dock，请尝试使用Ctrl+Shift+I--但是如果您的窗口是弹出窗口，我认为停靠甚至都不起作用。 - Noumenon
谢谢！检查器在屏幕外很远的地方卡住了，CTRL+SHIFT+D 为我停靠了它！ - Stan
1
由于某种原因，当我取消停靠 Chrome 开发者工具时，该工具似乎会跑到我的显示器右侧并且不再可见。唯一的方法是使用 Ctrl+Shift+D 将开发者工具停靠在侧面或底部才能使其重新出现。这很奇怪。 - Tikhon
我只想表达我对你的爱。 - Curtis Blackwell
19

看起来现在它是一个带有重叠窗口和“分离到独立窗口”工具提示的图标，位于左下角。

输入图像描述

13
请注意，为了将其停靠在右侧，您需要单击并按住该按钮。正如@PaulSpencer所指出的那样，仅单击会取消停靠。 - 0x89
11

在我将我的 dock 放置到右侧后（请参见早期的答案），我仍然发现面板竖直分割。

要将面板水平分割 - 甚至可以更好地利用屏幕宽度 - 转到设置（右下角），并取消“停靠到右侧时垂直拆分面板”的选中框。

现在，您可以从左到右查看所有面板:p

8
截至2014年10月，版本39.0.2171.27 beta（64位）。
我需要进入Chrome Web开发人员版的"设置"，并取消勾选“当停靠在右侧时垂直分割面板”。
2
如果您使用的是Windows系统，当开启开发者工具时有一些快捷键可以使用：
按下Ctrl+Shift+D将会轮流将所有开发者工具停靠在左侧、右侧或底部。
如果您的JavaScript控制台不见了，并且您想要将其停靠回开发工具底部，请按下Ctrl+Shift+F。
1

我现在使用的版本是56.0.2924.87，如果你不在桌面上，它会自动取消连接DevTools。否则，打开一个新的Chrome标签并检查以将DevTools停靠回窗口。

你说的“不在桌面上”是什么意思？我使用的是59.0.3067.6（dev）版本，在某些网站上出现了一些奇怪的问题。例如，在Vtiger 6.5中，右键单击并选择“检查”会在新窗口中打开开发工具，但缺少“停靠侧”选项，然而使用F12则可以正常嵌入当前标签页中，并提供“停靠侧”选项。很奇怪。 - dhaupin
0
此外，如果您想在一个窗口中查看源代码和控制台，请前往：

“自定义和控制开发工具” -> “显示控制台抽屉”

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

"Show console drawer"

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接