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.

screenshot of vertically split devtools

horizontal split

if prefer have console @ right instead of bottom, customize developer tools editing path/to/profile/default/user stylesheets/custom.css, , add following rules:

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:

screenshot of horizontally split devtools


Comments

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -