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?
[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
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.
yes you can. just hold the doc button and you will get the option to view vertically. Or you can use the show windows side by side from the task bar.
Related
Is there a way to make terminal span the entire width of the application without closing the sidenav? I use it quite a bit, and often I have to hide the sidenav in order to see it in full width. It would be great if I could set it up so the sidenav is just alongside the editor, allowing terminal to take up the full width of the application.
This is in Stable v1.64 now.
Go to View/Appearance/Align Panel/Justify or use the Layout Control icon on the upper right mentioned below.
Other options for the Panel alignment are center/left/right.
Note that that the Layout icon on the upper right was recently added with this setting:
Workbench > Layout Control: Enabled
Also, as of v1.75 this can be done via the context menu for the Panel. Right-click on an open space of the Panel to the right of the View headers to open the context menu:
See Release Notes: Manage Panel Alignment
It's already available since version 1.64.
Let's switch to Justify option.
**Unfortunately, it is not possible at the moment.
There is a ticket for this feature in the VSCode repository - https://github.com/microsoft/vscode/issues/42149
UPDATE:
It's already available since version 1.64.
See other answers below for more information
Is there a way to make terminal span the entire width of the application without closing the sidenav? I use it quite a bit, and often I have to hide the sidenav in order to see it in full width. It would be great if I could set it up so the sidenav is just alongside the editor, allowing terminal to take up the full width of the application.
This is in Stable v1.64 now.
Go to View/Appearance/Align Panel/Justify or use the Layout Control icon on the upper right mentioned below.
Other options for the Panel alignment are center/left/right.
Note that that the Layout icon on the upper right was recently added with this setting:
Workbench > Layout Control: Enabled
Also, as of v1.75 this can be done via the context menu for the Panel. Right-click on an open space of the Panel to the right of the View headers to open the context menu:
See Release Notes: Manage Panel Alignment
It's already available since version 1.64.
Let's switch to Justify option.
**Unfortunately, it is not possible at the moment.
There is a ticket for this feature in the VSCode repository - https://github.com/microsoft/vscode/issues/42149
UPDATE:
It's already available since version 1.64.
See other answers below for more information
Is there a way to make terminal span the entire width of the application without closing the sidenav? I use it quite a bit, and often I have to hide the sidenav in order to see it in full width. It would be great if I could set it up so the sidenav is just alongside the editor, allowing terminal to take up the full width of the application.
This is in Stable v1.64 now.
Go to View/Appearance/Align Panel/Justify or use the Layout Control icon on the upper right mentioned below.
Other options for the Panel alignment are center/left/right.
Note that that the Layout icon on the upper right was recently added with this setting:
Workbench > Layout Control: Enabled
Also, as of v1.75 this can be done via the context menu for the Panel. Right-click on an open space of the Panel to the right of the View headers to open the context menu:
See Release Notes: Manage Panel Alignment
It's already available since version 1.64.
Let's switch to Justify option.
**Unfortunately, it is not possible at the moment.
There is a ticket for this feature in the VSCode repository - https://github.com/microsoft/vscode/issues/42149
UPDATE:
It's already available since version 1.64.
See other answers below for more information
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
When we use Chrome developer tools for inspecting elements, top panel will show up where we can choose which device chrome will emulate, what network throttle setting, there will also be a ruler top and sideways... is there an option to temporarely remove all that?
I work on laptop and my screen isn't as big as I would like to, and when inspecting elements, it becomes even smaller, and at lot of times I don't need those options.
There is only a button for hiding media queries and it helps a bit.
It is the result of mobile emulation mode. There is a small button on the left side of the menu bar. It looks like a phone. You can click on and switch off the emulation mode.
In the main Dev tool window, click on the kebob menu and then Toggle device Toolbar.