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

Chrome开发者工具:有没有办法在单独的视图中查看“ Console选项卡和“ Sources选项卡? 我经常想同时看这两个。

Sources选项卡上按Esc可以让我看到底部Console的一个小视图。 但是我想同时看到两者的更大的观点。 这可能吗?

如果没有,这是一个铬扩展可能会做的事情?

编辑:

澄清 – 我知道如何解开开发工具窗口(这是我的默认设置)。 只是贪婪我猜想,如果我可以进一步拆分SourcesConsole到单独的未连接的窗口(或者至less,他们的意见在同一个窗口垂直分裂,而不是按Esc水平)

5 Solutions collect form web for “Chrome开发者工具:查看控制台和来源视图在不同的视图/垂直平铺?”

垂直分割

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

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

垂直分割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; } 

结果如下所示:

水平分割devtools的屏幕截图

esc – 是捷径,

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

在这里输入图像说明

一个更简单的解决scheme是保持左下方的图标,这将popup另一个图标,选中后,将允许您查看主浏览器窗口右侧的控制台

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

我不知道有什么办法来分割开发者工具窗口,但是你可以在垂直,水平和自动(默认)面板布局之间进行切换。 我经常发现这是有用的。

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

如果您可以键入,但没有看到控制台,并且无法调整它:

在这里输入图像说明

然后在右上angular取消 DevTools。 那么你将能够调整它的大小:

在这里输入图像说明

之后你可以停靠它。

  • 如何在Chrome DevTools中查看触发元素的事件?
  • Chrome开发者工具不再显示所有的JavaScript文件
  • Google Chrome开发工具检查不显示的元素样式
  • Chrome DOM断点不断启用
  • 在“正常刷新”,“硬刷新”和“清空caching和硬重新载入”之间有什么区别?
  • Google Chrome移动模拟器:如何在屏幕键盘上显示
  • Chromedebugging - 打开下一个点击事件
  • jQuery的jquery-1.10.2.min.map触发404(Not Found)
  • 当前浏览器窗口closures时,如何防止Chrome开发人员工具closures?
  • 如何检查Chromedebugging器中的JavaScript函数返回值?
  • 在Chrome中embeddedJavaScriptredirect之前打破JavaScript