Question

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

在Sources标签上按 Esc 可让我看到底部Console的小视图。但是我希望同时对这两者有更大的看法。这可能吗？

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

编辑：

澄清 - 我知道如何取消停靠开发工具窗口（这是我的默认设置）。只是贪婪我想，并想知道我是否可以进一步将Sources和Console拆分成单独的未停靠的窗口（或者至少，让他们的视图在同一个窗口上垂直分割，而不是水平按压{ {1}}确实如此）

Answer 1

垂直分割

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

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

水平分割

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

编辑：已删除对Custom.css的支持，但仍可以使用新的chrome.devtools.panels.applyStyleSheet方法（sample code）更改开发人员工具的样式。

/* 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;
}

结果如下：