Google chrome Chrome开发者工具：独立视图中的视图控制台和源视图/垂直平铺？

Chrome开发者工具：有没有办法在不同的视图中查看

控制台

选项卡和

源

选项卡？我经常想同时研究这两个问题

在

源

选项卡上按Esc键可以看到底部的

控制台

的小视图。但我想同时看到两者的大图。这可能吗

如果不是，这是chrome扩展可以做到的吗

编辑：

澄清-我知道如何取消“开发工具”窗口（这是我的默认设置）。我只是贪心地想知道我是否可以进一步将

源

和

控制台

拆分为单独的未锁定窗口（或者至少，让它们的视图在同一个窗口上垂直拆分，而不是像按

Esc

那样水平拆分）

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

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

水平分裂 如果希望控制台位于右侧而不是底部，请通过编辑

path/to/profile/Default/User StyleSheets/Custom.css

，自定义开发人员工具，并添加以下规则：

编辑：对

Custom.css

的支持已被删除，但仍然可以使用新的API更改开发人员工具的样式，

chrome.devtools.panels.applyStyleSheet

方法（）

/*如果抽屉已展开至少一次，但仍在展开*/
#-webkit web inspector#main[style*=“bottom”]：非（[style*=“bottom:0”]）{
宽度：50%；
底部：0！重要；
}
#-webkit web inspector#抽屉[style*=“height”]：非（[style*=“height:0”]）{
/*抽屉的位置*/
左：50%！重要；
/*用于正确定位#抽屉的样式*/
顶部：26px！重要；
高度：自动！重要；
z指数：1；
左边框：1px实心rgb（64%，64%，64%）；
}
#-webkit-web-inspector.show-toolbar-icons#drawer[style*=“height”]：非（[style*=“height:0”]）{
顶部：56px！重要；
}

结果如下所示：

---

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

自三年前发布此消息以来，OP可能已经移动，但对于其他人来说：

我不知道如何分割开发人员工具窗口，但您可以在垂直、水平和自动（默认）面板布局之间切换，OP在其说明中询问了这一点。我经常发现这是有用的

打开“开发工具”窗口右上角的三点菜单

选择“设置”

“常规”选项卡-->“外观”部分

“面板布局”

esc-是捷径

或者在

菜单上（三点）单击
显示控制台抽屉


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


然后，松开位于右上角的DevTools。然后您将能够调整其大小：


在此之后，您可以将其重新停靠。
在右侧按“三点”并单击“显示控制台抽屉”

很抱歉，我应该澄清一下（也可以在原始帖子中澄清）：我已经假设了一个未锁定的开发人员工具窗口（默认情况下我就是这样）。但是从这个窗口，我仍然可以像一个单独的窗口一样“拉出”
Console
或
Sources
，就像你可以使用ChromeEnable上的常规选项卡一样，并在一个新窗口中打开devtools。我不确定它是否已经支持多个实例，你应该试试。听起来很有希望（虽然很复杂）。我将尝试并发布它的工作原理out@HimanshuP远程调试尚不支持多个实例。我已经用另一种方法更新了我的答案，请查看。我只是想找到一种方法来关闭始终可见的垂直拆分控制台<代码>Esc执行此操作。非常感谢。这应该是公认的答案，因为它既正确又“明显”。注意：在Chrome的最新版本中（截至2015年3月18日），这是逃离停靠底部和停靠侧模式的强制性要求，即您需要一个单独的窗口。@miraclixx不，这是不正确的。OP已经有一个未锁定的DevTools窗口。无法理解“左下角图标”（根据此评论的日期，我没有看到任何内容）我一直在寻找这个答案。谢谢在我的例子中，当我的屏幕不是全宽时，面板会垂直堆叠在底部。这对我来说是适得其反的，因为我希望面板组在底部并排放置，而不是垂直堆放。单击布局图标并没有为我提供我想要的布局，但您的解决方案按照我的要求工作。每次切换到新计算机时，我都必须搜索如何找到此设置并获得我的首选布局。谢谢有一次我十年来都在寻找一个功能，结果发现我的键盘上一直有一个按钮。某种程度上。