Chrome 开发人员工具：在单独的视图/垂直平铺中查看控制台和源视图？

Posted 2023-02-22

【中文标题】Chrome 开发人员工具：在单独的视图/垂直平铺中查看控制台和源视图？

【英文标题】：Chrome developer tools: View Console and Sources views in separate views/vertically tiled?

【发布时间】：2013-05-08 09:54:32

【问题描述】：

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

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

如果没有，这是否是 chrome 扩展程序能够做到的事情？

编辑：

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

【参考方案1】：

垂直分割

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

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

水平分割

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

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

结果如下：

【讨论】：

对不起，我应该澄清一下（在原始帖子中也会这样做）：我已经假设一个未停靠的开发人员工具窗口（默认情况下对我来说就是这样）。但是从那个窗口，我仍然可以像单独的窗口一样“拉出”Console 或 Sources，就像您可以使用 Chrome 上的常规标签一样

启用remote debugging，并在新窗口中打开开发工具。我不确定它是否已经支持多个实例，你应该尝试一下。

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

按ESC键是这个问题的答案

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

【参考方案2】：

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

【讨论】：

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

注意：在最近的 Chrome 版本中（截至 2015-03-18），这是强制退出停靠底部和停靠侧模式的 - 即您需要一个单独的窗口。跨度>

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

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

【参考方案3】：

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

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

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

【讨论】：

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

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

【参考方案4】：

esc - 是快捷方式，

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

【讨论】：

十年一次，我寻找一个功能，结果发现一直有一个按钮，就在我的键盘上。有点。

【参考方案5】：

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

然后在右上角取消停靠 DevTools。然后你就可以调整它的大小了：

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

【参考方案6】：

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