Chrome developer tools: View Console and Sources views in separate views/vertically tiled? -
chrome developer tools: there way view console
tab , sources
tab in separate views? want @ both of these simultaneously.
pressing esc
when on sources
tab let me see small view of console
@ bottom. i'd larger view of both @ same time. possible?
if not, chrome extension might able do?
edit:
clarification - know how undock dev tools window (that's default setup). being greedy guess , wondering if can further split sources
, console
separate undocked windows (or @ least, have views splits vertically on same window, instead of horizontally pressing esc
does)
vertical split
you can undock developer tools (by clicking on icon in bottom-left corner), moves new window. press esc open console.
both window , "small console" can resized meet needs.
horizontal split
if prefer have console @ right instead of bottom, customize developer tools editing , , add following rules:path/to/profile/default/user stylesheets/custom.css
edit: support custom.css
has been removed, it's still possible change styles of developer tools using new api, chrome.devtools.panels.applystylesheet
method (sample code).
/* if drawer has been expanded @ least once , 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"]) { /* position of drawer */ left: 50% !important; /* styles position #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 this:
Comments
Post a Comment