I have somehow managed, that my console tab is locked in Chrome dev tools and I am not able to open console in top windows simultaneously with bottom console. It automatically collapses the opposite console tab and I cannot even right click and move to bottom/top.
I think, I used some shortcut accidentally, but cannot find how to reverse this behavior.
Related
VS Code was docking devtools pane within the window before. Now, It opens a new window that increases back and forth. Is there any way to dock it back? I tried a few settings they did not work. Also, there is no dock icon as in Chrome.
This started with vscode v1.74 and is an electron bug. See The developer tools become a floating window.
There is a fix reported there. Disable the setting
Windows > Experimental > Windows Control Overlay: Enabled
You will be prompted to restart vscode and then opening the Dev Tools will be docked as before. Apparently, the Electron bug has been fixed.
In the devtools panel, click the vertically-aligned three dots at the top right. That will open up a context menu. You will see a "Dock side" entry with different icons signifying option values for that setting. You probably accidentally clicked the one that makes it pop the devtools out into its own window. Select whichever option you actually want there.
I have looked for a solution but couldn't find one, recently I switched the Explorer in VSCode from the LHS to the RHS and it works better, the problem I am now having is that when I open the terminal I get a debug console on the left - see picture below.
Is there a way in which I can disable/hide the Debug Console part of the terminal? It is always maximized when I start a new console and I can't set it to minimize.
Either choose Reset Location in the context menu or just drag the Debug Console header back into the upper part of the Panel (like to the right or left of the Terminal header).
At some point you must have dragged the Debug Console header into the body of the Terminal (when Terminal was active and into the left half of its view).
You'll also notice that the option to Hide 'Debug Console' is disabled in your first situation - that is a hint of sorts - it is actually within the Terminal view and so cannot be separately hidden from its context menu.
Click on the debug tab and drag it to the top.
I have the developer tools floated to be a separate window.
It nows takes the entire screen.
I did lots of research to see how to close it, but found nothing related.
Most of the posts are about how to open it.
(I tried CMD + option + i / F12, neither one works).
Also, I wonder how to dock it back into the page. I do not see such
an option under the "..." on top right corner.
Command+Shift+D (Mac) or Control+Shift+D (Windows, Linux) restores the DevTools window back to whatever position you had it in before you undocked it.
You can also change the docking position by opening the Command Menu, typing Dock, and selecting the option you want.
You can also access these options from DevTools's Main Menu. Note: It sounds like you were looking for the options in Chrome's main menu. You won't find any DevTools options there, other than the option to open DevTools.
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.
Is there a way where one can open a specific tab of the Chrome Developer Tools in a separate window? I have got 3 monitors and would like to have the Sources tab on one screen and the Elements on another screen. Is this possible?
I find this limitation frustrating too, all those other monitors are wasted! Here is poor man's solution:
launch your chrome with --remote-debugging-port=9999 command line parameter
right click on your page to debug and select 'Inspect Element' - this is your debug window #1
open a separate chrome window and navigate to chrome://inspect
click 'Configure...' and add localhost:9999
within a couple of seconds under 'Remote Targets' you should see tabs you can inspect from your other chrome instance
click on the tab, and now this is your debug window #2
Unrelated tip: system wide nightmode experience: http://danielsokolowski.blogspot.com/2018/11/windows-10-8-7-night-mode.html