Microsoft has released a new Edge tools extension for VS Code

Get a free Techzine subscription!

Microsoft has announced that its Microsoft Edge Tools for VS Code extension is now generally available. The developers can embed Edge’s browser developer tools into the software giant’s widely used cross-platform code editor.

The new extension can be used by developers to use the built-in Edge Elements and Network tool straight from Microsoft’s Visual Studio Code. With the VS Code, they can fix layout, styling, and CSS issues in a site.

The main idea here is to bring Edge’s tools to the VS code, allowing developers to switch between the browser and editor when performing development and debugging tasks.

Key differences

Microsoft says that the extension makes developer workflow simpler by changing how one launches Edge’s instance to do the debugging. Users will be able to connect to an existing browser instance, open a new one, or open a headless browser that doesn’t have a browser window or no icon on the taskbar. 

The continuous switching between editor and browser adds a load to the workflow as the day progresses.

Now people will be able to choose whether the browser is headless or not. When it is headless, the browser will not open in a separate window but opens on to the editor’s left panel.

Feedback is welcome

There is now a Network tab in the Edge Tools for VS Code extension. Microsoft launched an integration before this to integrate the Edge DevTools Network pane into the VS Code.

It is going to be a feature of Edge DevTools still. The Network pane is off by default, but Microsoft wants to get some feedback on this configuration choice. The extension only works on Chromium-based Edge, so it probably won’t work on Google Chrome.

The new Edge developer tools extension can be accessed from Microsoft’s Visual Studio Marketplace.