Search code examples
visual-studio-codemicrosoft-edgevscode-extensionsvscode-debuggerdevtools

Can I use the VS Code Edge devTools with a url and not only a file in my project?


I just found out you can open an edge browser window + the traditional chromium devtools window all within your vscode window panes. Which is amazing, this means I can full screen my vscode and do absolutely all my development through it!

The only thing is, that it seems you can only open file:/// protocol url's and not custom host setup local domains where you might be running a complex webserver setup for?

I don't need the file stepping and etc.. All I need is to be able to have the edge window and devtools window open within vscode using a custom URL like my.domain.top ?

Is this possible?

Did they remove the launch instance command? That seems to be I think what I'm looking for?


Solution

  • Yes, you can open a custom URL with VS Code Edge DevTools.

    First, you need to install the DevTools extension for VS Code following this guide: Installing the DevTools extension for Visual Studio Code. Step 1-4 shows how to install the DevTools extension.

    Then, you can click the Launch Instance button of the extension, it will open the Edge DevTools: Browser tab. Just copy and paste the URL in the address bar of the tab. For more information, you can refer to this doc: Get started by clicking the Launch Instance button.

    However, the Launch Project button, along with a URL stored in launch.json, is the main way to open a webpage by specifying a URL, and the tools then open in Debug mode. For how to use Launch Project to debug, please refer to this doc: Get started by clicking the Launch Project button.