Search code examples
google-chrome-devtools

Chrome Dev Tools Split Vertically while Detached?


When using the Chrome Dev Tools window detached from the browser window, is it possible to change the layout to be split vertically instead of horizontally?

In the Dev Tool options there is an option to split vertically but it only applies when the Dev Tools window is attached to the right side of the browser window. Doesn't have any effect when the window is detached.

See the screenshot below: Things are too cramped with the horizontally laid out panels. If you could lay them out vertically it would be perfect.

Is this possible?

enter image description here


Solution

  • [UPDATE] It looks like Panel layout setting is now respected in detached windows (tested in Chrome 55).

    Original, outdated, answer below.


    This is not an exposed option, but it's possible:

    • undock DevTools window (A),
    • focus on that window and hit alt+cmd+J,
    • this will open another DevTools window (B) - in that window's console execute

      WebInspector.panels.elements._splitVertically(true)
      
    • close window B

    enter image description here

    The only issue here is that this change will not "stick". For each DevTools window you'll have to repeat above procedure. However, if you'd like this option to stick and to be exposed in the DevTools settings you can file a feature request on crbug.com.