Quoting the original idea:
I came across a problem where I need to share all my debugger breakpoints to my colleague to debug the issue at his end. So thought of implementing something like export the debugger points from one system and import at other system.
Since devtools doesn't provide a built-in import/export feature, is there another way?
Use devtools-on-devtools:
open devtools and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
UI method:
in this new window switch to Application tab, expand Local Storage, then devtools://devtools on the left
double-click breakpoints value on the right and copypaste it
Now do the same on the target computer and reopen the main devtools window afterwards.
Console method (especially useful if the value is too long):
run copy(localStorage.breakpoints) in devtools-on-devtools console on the source computer to copy the value to clipboard
run localStorage.breakpoints=prompt() on the target computer
(the prompt will appear in the main devtools window).
Console method to export everything:
run copy(JSON.stringify(localStorage)) in devtools-on-devtools console on the source computer to copy the value to clipboard
run Object.assign(localStorage, JSON.parse(prompt())) on the target computer
(the prompt will appear in the main devtools window).
P.S. Next time you can quickly toggle the detached state of devtools by pressing CtrlShiftD
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.
in VSCode is it possible to open the terminals in a separate window?
So far my research has pointed to a resounding NO but Im curious if anyone has a solution?
Move terminals between windows
It's now possible to move terminals between windows by detaching via
Terminal: Detach Session in one and attaching to another with
Terminal: Attach to Session. In the future this should help enable
cross-window drag and drop!
Lots of changes in v1.58: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_58.md#terminals-in-the-editor-area
For v1.59 moving the terminal changes - including dragging and dropping onto another window, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_59.md#drag-and-drop-terminals-across-windows
Drag and drop terminals across windows
Drag terminals from the tabs
list or editor area of one window into the tabs list, editor area, or
panel of another window.
Terminals in the editor area
Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state.
To use terminals in the editor area, there are several options:
Create via the Create Terminal in Editor Area command.
Move a terminal from the panel to the editor by dragging and dropping from the tabs list.
Running Move Terminal into Editor Area with a terminal focused.
Moving into the editor area via the terminal tab context menu action.
The new terminal.integrated.defaultLocation setting can be set to editor to direct newly created terminals to the editor area by default.
Please Try:
File > Open New Window
Ctrl+Shift+P > Terminal: Create New Terminal in Editor Area
You can add keybinding to the commands as per your convenience.
i think that the OP wants to create a separate window for the terminal but still have the separated terminal linked to the code editor in the original window (that's what i want too). so that when you run the code in the editor the output is shown in the terminal in the separate window. but if you simply open up a new window of vscode and either open a terminal there or drag and drop the terminal from the original window into the new window, the new terminal is not the same session of the terminal. it is a separate independent unconnected terminal. running the code in the editor does not show output in the new separate terminal. all you have achieved is creating a new unconnected terminal. which you could have just accomplished by opening up a regular terminal window i.e. the one from windows os main menu, no need even to use vscode.
This answer is now outdated. See this answer for instructions on moving terminal panes between VS Code windows. This answer still works but is no longer a necessary workaround.
You can't detach the panes in VSCode, which IMO is a bit of a pain since Visual Studio can detach panes all day long.
There is a workaround though, you can open a new window in VSCode and maximize the terminal pane in that window.
One reason you'd want to do this is to have the Python terminal on a second monitor while still being able to use Python interactively (shift+enter way). Attaching/detaching didn't work for me, nor can you open separate terminals.
What you can do is simply resize your one window across the screen borders! Then right click on the terminal tab/header and click Move panel to the left and voila!
Try Сtrl+Shift+c.
For me, it opens the folder the script is within in a command prompt window.
Create a new window by going to File → New Window.
Open up a new terminal inside of it.
Go to your folder (cd your\projectfolder\path).
And here you are, you have a terminal for your project inside it's own seperate window.
You can change the terminal to be side-by-side instead of below the editor. And then make your window very wide. It is almost as good as having two windows.
Right click on the TERMINAL tab.
Select "Move Views to Side Panel"
Make your window very wide
It seems VS Code allows you to detach the terminal window, but it then will not show the output from the editor of the window you detached it from.
I have spent a while searching, and there is really no workaround other than to just run whatever file you are trying to debug from a separate terminal from the same CWD. This also means you will need to save the file in the window you are editing the file in every time you want to run it. huge pain.
If you are using PowerShell inside the VSCode terminal, why don't you use the PowerShell console from the start menu. It's basically equivalent to using the terminal in separate windows. Hope it helps.Sample
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