Chrome开发者工具：在不同的视图中查看控制台和来源视图/垂直平铺？ [英] Chrome developer tools: View Console and Sources views in separate views/vertically tiled?

问题描述

Chrome开发者工具：是否可以在单独的视图中查看控制台选项卡和来源选项卡？我经常想同时看到这两个。

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

如果不是，这是一个铬扩展可能能够做到的事情吗？

编辑：

澄清 - 我知道如何取消锁定开发工具窗口（这是我的默认设置）。只是贪婪我猜想，并想知道如果我可以进一步拆分来源和控制台到单独的未连接的窗口（或在至少，他们的视图在同一个窗口垂直分割，而不是像 Esc 那样水平地分割）

解决方案

纵向分割

您可以解开开发者工具（通过点击左下角的图标），将其移动到新窗户。然后按 Esc 打开控制台。

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

水平分割

如果您希望控制台位于右侧而不是底部，请通过编辑 path / to / profile / Default / User StyleSheets来自定义开发人员工具/Custom.css ，并添加以下规则：

编辑：支持 Custom.css 已被删除，但仍可以使用新的API更改开发人员工具的样式， chrome.devtools.panels.applyStyleSheet method（

Chrome developer tools: Is there a way to view the Console tab and the Sources tab in separate views? I often want to look at both of these simultaneously.

Pressing Esc when on the Sources tab will let me see the a small view of the Console at the bottom. But I'd like a larger view of the both at the same time. Is this possible?

If not, is this something that an chrome extension might be able to do?

Edit:

Clarification - I know how to undock the dev tools window (that's my default setup). Just being greedy I guess and wondering if I can further split Sources and Console into separate undocked windows (or at the very least, have their views splits vertically on the same window, instead of horizontally as pressing Esc does)

解决方案

Vertical split

You can undock the developer tools (by clicking on the icon in the bottom-left corner), which moves it to a new window. Then press Esc to open the console.

Both the window and the "small console" can be resized to meet your needs.

Horizontal split

If you prefer to have the console at the right instead of the bottom, customize the developer tools by editing path/to/profile/Default/User StyleSheets/Custom.css, and add the following rules:

EDIT: Support for Custom.css has been removed, but it's still possible to change the styles of the developer tools using a new API, chrome.devtools.panels.applyStyleSheet method (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;
}

The result looks like this:

这篇关于Chrome开发者工具：在不同的视图中查看控制台和来源视图/垂直平铺？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！