Microsoft has announced the general availability of Microsoft Edge Tools for VS Code extension, giving developers the option of embedding the browser developer tools into Visual Studio Code, aka VS Code.

The extension, which has been in beta for a year, combines the features of two experimental extensions adding Developer Tools functionality to VS Code: The Elements and the Network extension.

The thinking behind the VS Code extension is to keep VS Code as a light-weight programming environment while making developer tools available for the browser as an extension. It lets you use the browser's Elements and Network tool from within the editor. The DevTools will connect to an instance of Microsoft Edge so you can see the runtime HTML structure, alter layout, fix styling issues, and view network requests.

The tools provide debug configurations for launching Microsoft Edge browser in remote-debugging mode and auto attaching the tools, and there's a side bar view for listing all the debuggable targets, including tabs, extensions, and service workers.

A screen-casting feature can be used to see your page without leaving VSCode, and you can go directly to the line/column for source files in your workspace when clicking on a link or CSS rule inside the Elements tool.

The Microsoft Edge Tools extension lets you choose between connecting to an existing browser instance, starting a new one, or using a “headless” browser. The “headless” option doesn't add its own browser window and doesn't put an extra icon in your task bar.

The developers say the Network pane is the second most-used feature in the Microsoft Edge DevTools, and last year Microsoft released a separate standalone extension to integrate the Network pane into VSCode. With this release the two extensions have been merged into one, though you can now also enable the Network tab in the extension settings.

More Information

Microsoft Edge Tools for VS Code extension

Related Articles

Atom v Visual Studio Code - The Unexpected Consequence Of Consolidation

Program Arduino in Visual Studio Code

Open Source Visual Studio Code Without Trackers Launched

Visual Studio Code - Now With Added Extensions

Microsoft Releases Visual Studio Code IDE For Linux, Mac And Windows       

A Programmer's Guide To Go With Visual Studio Code

Run VSCode in the Browser

Visual Studio Online Is VS Code  

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info