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)
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.
If you prefer to have the console at the right instead of the bottom, customize the developer tools by editing , and add the following rules:path/to/profile/Default/User StyleSheets/Custom.css
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: