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

Question

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)

Rob W · Accepted Answer · 2013-12-22T10:23:40.710

205

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:

edited Dec 22 '13 at 10:23

answered May 14 '13 at 08:18

Rob W

341,306
83
791
678

1

Sorry I should have clarified (will do in the original post as well): I am already assuming an undocked developer tools window (that's how it is for me by default). But from that window, I'd still be able to "pull out" `Console` or `Sources` like a separate window, like you can do with the regular tabs on Chrome – Himanshu P May 14 '13 at 08:25
Enable [remote debugging](https://developers.google.com/chrome-developer-tools/docs/debugger-protocol), and open the devtools in a new window. I am not sure whether it already supports multiple instances, you should try it. – Rob W May 14 '13 at 08:34
Sounds promising (though complicated). Will try it out and post how it works out – Himanshu P May 14 '13 at 08:44
1

@HimanshuP Remote debugging does not support multiple instances yet. I've updated my answer with an alternative method, check it out. – Rob W May 17 '13 at 08:30
Works perfectly. Many thanks! Also, since its just CSS, one can tweak the relative widths of the two panels as per desired. Awesome! [A correction in your answer: you've got the headings "vertical" and horizontal" switched :)] – Himanshu P May 17 '13 at 19:58
1

pressing ESC key is an answer to this question – Soman Dubey Sep 27 '14 at 10:11
2

I was just looking for a way to close the vertically-split Console that was always visible. `Esc` did this. Thank you! – duma Nov 14 '14 at 17:15

bhv · Answer 2 · 2020-08-10T07:54:21.437

158

esc - is the shortcut ,

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

edited Aug 10 '20 at 07:54

answered Feb 02 '17 at 12:04

bhv

5,188
3
35
44

4

Once a decade I hunt for a feature and it turns out there was a button for it all along, right there on my keyboard. Sort of. – Bob Stein May 13 '17 at 18:19

score 15 · Answer 3 · answered Sep 22 '19 at 00:12

15

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

answered Sep 22 '19 at 00:12

Soham Mehta

576
5
4

score 9 · Answer 4 · answered Apr 12 '16 at 22:52

9

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.

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

answered Apr 12 '16 at 22:52

Pogginhopper

91
1
2

I've been looking for this answer a long time. Thanks! In my case, the panels would stack vertically at the bottom when my screen wasn't at full width. This was very counterproductive for me as I wanted the groups of panels to be side-by-side at the bottom, not stacked vertically. Clicking the layout icon didn't give me the layout I wanted, but your solution worked just as I wanted it to. – Chris22 Jul 12 '16 at 21:34
Every time I switch to a new computer I have to go searching how to find this setting and get my preferred layout. Thanks! – stacyhorton Nov 05 '17 at 04:56

score 5 · Answer 5 · answered Oct 10 '13 at 07:14

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

answered Oct 10 '13 at 07:14

Lloyd Moore

3,117
1
32
32

this should really be the accepted answer because it is both correct and "obvious" – miraculixx Jan 29 '15 at 18:43
Note: In recent versions of Chrome (as of 2015-03-18), this is mandatory to escape the docked-bottom and docked-side modes -- i.e. you want a separate window. – maxkfranz Mar 18 '15 at 16:28
1

@miraculixx No, it's not correct. The OP already has an undocked DevTools window. – jpaugh Jun 05 '15 at 22:16
2

Can't make sense of the "bottom left icon" (nothing for me as per the date of this comment) – Pac0 Nov 27 '17 at 10:34

Gennady G · Answer 6 · 2022-06-06T15:46:18.147

2

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.

upd.:

where is undock:

edited Jun 06 '22 at 15:46

answered Sep 25 '17 at 16:09

Gennady G

996
2
11
28

Where is this undock feature in Chrome? – Rylan Schaeffer Jun 05 '22 at 15:31
1

@RylanSchaeffer added screen shot to the post – Gennady G Jun 06 '22 at 15:46

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

6 Answers6

Vertical split

Horizontal split

Linked