Chrome 开发工具: 视图控制台和源代码视图分开/垂直平铺？

Chrome 开发工具: 有没有办法在不同的视图中查看 Console和 Sources选项卡？我经常想同时看这两个问题。

按下 Esc时，在 Sources选项卡将让我看到一个小视图的 Console在底部。但我希望同时看到两者的更大视角。这可能吗？

如果没有，这是一个 Chrome 扩展可以做的事情吗？

编辑:

澄清-我知道如何解码的开发工具窗口(这是我的默认设置)。只是贪婪，我猜想，并想知道如果我可以进一步分割 Sources和 Console成单独的未停靠窗口(或至少，有他们的意见垂直分裂在同一窗口，而不是水平按 Esc做)

102899 次浏览

小开

最佳答案

垂直分裂

您可以解锁开发人员工具(通过点击左下角的图标) ，将其移动到一个新窗口。然后按 Esc打开控制台。

窗口和“小控制台”都可以调整大小以满足您的需要。

水平分裂

如果您希望控制台位于右侧而不是底部，请使用 ~~通过编辑 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;
}

结果是这样的:

小开

一个更简单的解决方案是保持按下左下角的图标，这将弹出另一个图标，当选中时，将允许您查看主浏览器窗口右侧的控制台

小开

自从三年前发布这篇文章以来，《观察家报告》可能已经翻篇了，但对于其他任何人而言:

我不知道任何分割开发人员工具窗口的方法，但是您可以在垂直、水平和自动(默认)面板布局之间切换，这是 OP 在澄清中要求的。我经常发现这是有用的。

打开 dev tools 窗口右上角的三点菜单。
选择「设定」。
“一般”选项卡—— > “外观”部分
“面板布局”

小开

esc-是捷径,

或在 menu(三个点)点击 show console drawer

小开

如果你可以输入但是看不到控制台并且不能调整它的大小:

然后在右上角使用解码 DevTools，这样你就可以调整它的大小:

这之后，你可以把它停回去。

发行日期:

卸货地点:

小开

在右键按“三点”并点击“显示控制台抽屉”