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

Question

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

google-chromegoogle-chrome-extensiongoogle-chrome-devtools

170

Chrome开发者工具：是否有一种方法可以在单独的视图中查看Console选项卡和Sources选项卡？我经常想同时查看这两个选项卡。

在Sources选项卡上按Esc键会让我在底部看到Console的小视图。但是我希望同时看到它们的更大视图。这可行吗？

如果不行，是否有Chrome扩展程序可以实现此功能？

编辑：

澄清一下-我知道如何解除开发者工具窗口(这是我的默认设置)。我只是贪心，想知道是否可以进一步将Sources和Console拆分为单独的未解除锁定的窗口(或至少将它们的视图垂直拆分在同一个窗口中，而不是像按Esc键那样水平拆分)。

- Himanshu P

6个回答

163

esc - 是快捷键，

或者在菜单（三个点）中点击显示控制台抽屉

- bhv

4

每十年我都会寻找一个功能，结果发现原来我的键盘上就有一个按钮可以实现它。或者说差不多是这样。 - Bob Stein

16

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

- Soham Mehta

9

这篇帖子已经发表三年了，可能原作者已经不再关注，但对于其他人：

我不知道如何拆分开发者工具窗口，但是你可以在垂直、水平和自动（默认）面板布局之间切换，这正是原作者在他们的澄清中提出的问题。我发现这个功能经常很有用。

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

- Pogginhopper

我已经寻找这个答案很长时间了。谢谢！在我的情况下，当我的屏幕没有完全展开时，面板会垂直堆叠在底部。这对我来说非常不利，因为我希望面板组在底部并排而不是垂直堆叠。点击布局图标并没有给我想要的布局，但是你的解决方案正好符合我的要求。 - Chris22

每次我换到一台新电脑时，我都要去搜索如何找到这个设置并获取我喜欢的布局。谢谢！ - stacyhorton

5

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

- Lloyd Moore

这应该是被接受的答案，因为它既正确又“显而易见”，特别是在编程方面。 - miraculixx

注意：在 Chrome 的最近版本中（截至 2015-03-18），必须转义停靠底部和停靠侧边模式，即您需要一个单独的窗口。 - maxkfranz

1

@miraculixx 不，这不正确。原帖的作者已经有一个未停靠的 DevTools 窗口了。 - jpaugh

2

无法理解“左下角的图标”（根据此评论的日期，对我来说没有任何意义） - Pac0

2

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

然后在右上角取消停靠开发者工具。这样您就可以调整它的大小：

之后，您可以将其放回码头。

upd.:

"undock在哪里："

- Gennady G

Chrome中的取消停靠功能在哪里？ - Rylan Schaeffer

1

@RylanSchaeffer向帖子添加了屏幕截图。 - Gennady G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

垂直分割

您可以拆开开发者工具（点击左下角的图标），将其移动到新窗口。然后按 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;
}

结果看起来像这样：