Chrome developer tools: View Console and Sources views in separate views/vertically tiled?

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:

esc - is the shortcut ,

or at menu(the three dots) click on show console drawer

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