首页 文章

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

提问于
浏览
95

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

Sources 选项卡上按Esc将让我看到底部 Console 的小视图 . 但我希望同时对这两者有更大的看法 . 这可能吗?

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

编辑:

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

5 回答

  • 4

    垂直分割

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

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

    screenshot of vertically split devtools

    水平分割

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

    结果如下:

    screenshot of horizontally split devtools

  • 5

    esc - 是捷径,

    或者在菜单/设置中单击 show console drawer

    enter image description here

  • 0

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

  • 66

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

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

    • 打开开发工具窗口右上角的三点菜单 .

    • 选择'Settings' .

    • "General"标签 - > "Appearance"部分

    • "Panel Layout"

  • 131

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

    enter image description here

    然后 undock DevTools在右上角 . 然后你就可以调整它的大小:

    enter image description here

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

相关问题