it-swarm.dev

Chrome的开发者工具:在单独的视图/垂直平铺中查看控制台和源视图?

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

紧迫 Esc 当在Sources选项卡上时,我会看到底部的Console的小视图。但是我希望同时对这两者有更大的看法。这可能吗?

如果没有,这是Chrome扩展可能做的事情吗?

编辑:

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

104
Himanshu P

垂直分裂

您可以取消开发人员工具(通过单击左下角的图标),将其移动到新窗口。然后按 Esc 打开控制台。

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

screenshot of vertically split devtools

水平分割

如果您希望将控制台放在右侧而不是底部, 通过编辑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;
}

结果如下:

screenshot of horizontally split devtools

147
Rob W

esc - 是捷径,

或在菜单/设置点击显示控制台抽屉

enter image description here

75
bhv

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

5
Lloyd Moore

自三年前发布以来,OP可能已经开始了,但对于其他任何人来说:

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

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

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

enter image description here 

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

enter image description here 

在此之后您可以将其停靠。

1
Gennady G