156

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

在选项卡上按EscwhenSources会让我看到Console底部的小视图。但我想同时对两者有更大的了解。这可能吗？

如果没有，这是 chrome 扩展可能能够做到的事情吗？

编辑：

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

4

6 回答 6

199

垂直分割

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

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

垂直拆分开发工具的屏幕截图

水平分割

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

编辑：对 的支持Custom.css已被删除，但仍然可以使用新的 APIchrome.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;
}

结果如下所示：

水平拆分开发工具的屏幕截图

于 2013-05-14T08:18:30.813 回答
134

esc- 是捷径，

或在menu（三个点）单击show console drawer

在此处输入图像描述

于 2017-02-02T12:04:57.220 回答
15

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

在此处输入图像描述

于 2019-09-22T00:12:07.690 回答
9

自三年前发布此内容以来，OP 可能已经继续前进，但对于其他任何人：

我不知道拆分开发工具窗口的任何方法，但您可以在垂直、水平和自动（默认）面板布局之间切换，OP 在他们的澄清中询问了这些布局。我经常发现这很有用。

  1. 打开开发工具窗口右上角的三点菜单。
  2. 选择“设置”。
  3. “常规”选项卡->“外观”部分
  4. “面板布局”
于 2016-04-12T22:52:42.677 回答
5

一个更简单的解决方案是按住左下角的图标，这将弹出另一个图标，选择该图标后，您可以查看主浏览器窗口右侧的控制台

于 2013-10-10T07:14:48.990 回答
2

如果您可以输入但看不到控制台并且无法调整其大小：

在此处输入图像描述

然后在右上角取消停靠DevTools。然后您将能够调整它的大小：

在此处输入图像描述

在此之后，您可以将其对接回来。

于 2017-09-25T16:09:30.660 回答