Chrome 开发者工具:是否可以在单独的 View 中查看Console
选项卡和Sources
选项卡?我经常想同时查看这两个内容。
在Sources
选项卡上按Esc 将使我在底部看到Console
的小 View 。但我想同时对两者有更广阔的视野。这可能吗?
如果没有,这是 Chrome 扩展可以做到的吗?
编辑:
澄清 - 我知道如何取消停靠开发工具窗口(这是我的默认设置)。我想只是贪婪,想知道是否可以进一步将 Sources
和 Console
拆分为单独的未停靠窗口(或者至少,让它们的 View 在同一窗口上垂直拆分,而不是像按 Esc
那样水平放置)
最佳答案
垂直分割
您可以取消固定开发人员工具(通过单击左下角的图标),将其移动到新窗口。然后按 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;
}
结果如下所示:
关于google-chrome - Chrome开发者工具: View Console and Sources views in separate views/vertically tiled?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16537738/