Chrome developer tools: View Console and Sources v

问题:

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 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 a 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)

回答1:

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:

回答2:

esc - is the shortcut ,

or at menu/settings click on show console drawer

回答3:

In the right press the "Three Dots" and click "Show Console Drawer"

回答4:

The OP has probably moved on since posting this three years ago, but for anyone else:

I don't know of any way to split the developer tool window, but you can switch between vertical, horizontal and auto (the default) panel layouts, which the OP asked about in their clarification. I have frequently found this to be useful.

1. Open the three-dot menu in the upper right corner of the dev tools window.
2. Select 'Settings'.
3. "General" tab --> "Appearance" section
4. "Panel Layout"

回答5:

An easier solution is to keep the bottom left icon pressed which will pop up another icon which, when selected, will allow you to view the console to the right of your main browser window

回答6:

If You can type but don't see the console and can't resize it:

Then undock DevTools in upper-right corner. Then You will be able to resize it:

After this You can dock it back.