Chrome开发者工具：查看控制台和来源视图在不同的视图/垂直平铺？

Chrome开发者工具：有没有办法在单独的视图中查看“ Console选项卡和“ Sources选项卡？ 我经常想同时看这两个。

在Sources选项卡上按Esc可以让我看到底部Console的一个小视图。 但是我想同时看到两者的更大的观点。 这可能吗？

如果没有，这是一个铬扩展可能会做的事情？

编辑：

澄清 – 我知道如何解开开发工具窗口（这是我的默认设置）。 只是贪婪我猜想，如果我可以进一步拆分Sources和Console到单独的未连接的窗口（或者至less，他们的意见在同一个窗口垂直分裂，而不是按Esc水平）

Answer 1

垂直分割

您可以解开开发人员工具（通过单击左下angular的图标），将其移至新窗口。 然后按Esc打开控制台。

窗口和“小控制台”都可以resize以满足您的需求。

水平分割

如果您希望控制台位于右侧而不是底部，请通过编辑path/to/profile/Default/User StyleSheets/Custom.css定义开发人员工具 ，并添加以下规则：

编辑：支持Custom.css已被删除，但它仍然可以使用新的API， chrome.devtools.panels.applyStyleSheet方法（ 示例代码 ）更改开发人员工具的样式。

 /* If drawer has been expanded at least once AND it's still expanded */ #-webkit-web-inspector #main[style*="bottom"]:not([style*="bottom: 0"]) { width: 50%; bottom: 0 !important; } #-webkit-web-inspector #drawer[style*="height"]:not([style*="height: 0"]) { /* The position of the drawer */ left: 50% !important; /* styles to position the #drawer correctly */ top: 26px !important; height: auto !important; z-index: 1; border-left: 1px solid rgb(64%, 64%, 64%); } #-webkit-web-inspector.show-toolbar-icons #drawer[style*="height"]:not([style*="height: 0"]) { top: 56px !important; } 

结果如下所示：

Answer 2

esc – 是捷径，

或在菜单/设置点击显示控制台抽屉

Answer 3

一个更简单的解决scheme是保持左下方的图标，这将popup另一个图标，选中后，将允许您查看主浏览器窗口右侧的控制台

Answer 4

OP自从三年前发布以来可能已经开始了，但是对于其他人来说：

我不知道有什么办法来分割开发者工具窗口，但是你可以在垂直，水平和自动（默认）面板布局之间进行切换。 我经常发现这是有用的。

1. 打开开发工具窗口右上angular的三点菜单。
2. select“设置”。
3. “常规”选项卡 – >“外观”部分
4. “面板布局”

Answer 5

如果您可以键入，但没有看到控制台，并且无法调整它：

然后在右上angular取消 DevTools。 那么你将能够调整它的大小：

之后你可以停靠它。