Chrome开发者工具：单独视图中的View Console和Sources视图/垂直平铺？

128

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

按Esc上，当Sources标签将让我看到的一个小视图Console在底部。但是我想同时看到两者的更大视角。这可能吗？

如果不是，那么chrome扩展程序可以做到这一点吗？

编辑：

澄清-我知道如何退出开发工具窗口（这是我的默认设置）。只是贪婪我猜，不知道我是否可以进一步拆分Sources和Console成单独停靠的窗口（或者至少是，他们的意见分裂垂直同一个窗口上，而非水平的迫切Esc呢）

google-chrome google-chrome-extension google-chrome-devtools

— Himanshu P
source

176

垂直分割

您可以取消开发人员工具的停靠（通过单击左下角的图标），将其移至新窗口。然后按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;
}

结果看起来像这样：

— 罗伯·W
source

1

抱歉，我应该弄清楚（也将在原始帖子中进行说明）：我已经假设开发者工具窗口未对接（默认情况下，这对我来说就是这样）。但是，从那个窗口，我仍然能够“拔出” Console或Sources与Chrome的普通标签就像一个单独的窗口，就像你可以做

— 人士Himanshu P

启用远程调试，然后在新窗口中打开devtools。我不确定它是否已经支持多个实例，您应该尝试一下。

— 罗伯W

听起来很有希望（尽管很复杂）。将尝试一下并发布它的工作原理

— Himanshu P

1

@HimanshuP远程调试尚不支持多个实例。我已经用另一种方法更新了答案，请查看。

— 罗布W

1

我只是在寻找一种方法来关闭始终可见的垂直拆分控制台。Esc做过这个。谢谢！

— duma 2014年

100

esc -是捷径，

要么

在menu(the three dots)点击show console drawer

— 乙肝病毒
source

3

十年来，我一直在寻找一项功能，事实证明，在我的键盘上一直有一个用于执行此操作的按钮。有点。

— 鲍勃·斯坦

10

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

— 苏汉·梅塔（Soham Mehta）
source

7

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

我不知道有什么方法可以拆分开发人员工具窗口，但是您可以在垂直，水平和自动（默认）面板布局之间进行切换，OP在澄清这些布局时会询问这些布局。我经常发现这很有用。

打开开发工具窗口右上角的三点菜单。
选择“设置”。
“常规”标签->“外观”部分
“面板布局”

— Pogginhopper
source

我一直在寻找这个答案很久了。谢谢！在我的情况下，当屏幕未全屏显示时，面板将垂直堆叠在底部。这对我来说适得其反，因为我希望面板组在底部并排放置，而不是垂直堆叠。单击布局图标没有给我我想要的布局，但是您的解决方案可以按我想要的那样工作。

— 克里斯22年

每次切换到新计算机时，我都必须搜索如何找到此设置并获得首选的布局。谢谢！

— stacyhorton

5

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

— 劳埃德·摩尔
source

这确实应该是公认的答案，因为它既正确又“显而易见”

— miraculixx

注意：在最新版本的Chrome（自2015年3月18日起）中，必须执行此操作才能退出停靠的底部模式和停靠的侧面模式-即，您需要一个单独的窗口。

— maxkfranz

1

@miraculixx不，这是不正确的。OP已经有一个未固定的DevTools窗口。

— jpaugh

1

无法理解“底部左侧的图标”（根据此评论的日期，对我而言什么都没有）

— Pac0

2

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

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

之后，您可以将其停靠回去。

— 根纳季G
source