java chrome 控制台_Chrome开发者工具：在单独的视图/垂直平铺中查看控制台和源视图？...

垂直分割

您可以取消开发人员工具(通过单击左下角的图标)，将其移动到新窗口 . 然后按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;

}

结果如下：