📢 Microsoft Edge (Chromium) Tools for Visual Studio Code now generally available

Microsoft announced the general availability of the new Microsoft Edge (Chromium) Tools for Visual Studio Code extension, which clubs two experimental extensions (Elements and Network), will now allow you to see what your code generates, and debug the code without switching between editor and browsers.

The extension will add the ability to see runtime HTML structure, modify the layout, fix CSS styles, and view the network requests without leaving your Visual Studio Code Editor. To know more, and to get the link to download Microsoft Edge Tools for VS Code, continue reading further.

The new Microsoft Edge Tools for Visual Studio Code extension merges the functionality of two experimental extensions (Elements and Network) that brought Developer Tools functionality to Visual Studio Code, and Microsoft now made it generally available for the developers.

You can download the extension from the Visual Studio Marketplace, or install it from within the Visual Studio Code.

"Continuously switching between editor and browser adds cognitive load to your workflow throughout the day. You change from one environment to another – from development to debugging mode – and you need to switch back. That feedback is what prompted us to explore embedding the developer tools into an extension, thus allowing you to see what your code generates and debug it without leaving your “development” mindset", said Microsoft.

The extension operates in two modes - it can launch an instance of Microsoft Edge navigated to your app, or it can attach to a running instance of Microsoft Edge. Both modes require you to be serving your web application from a local web server, which is started from either a VS Code task or from your command-line.

Supported features of Microsoft Edge Tools for Visual Studio Code

• Debug configurations for launching the Microsoft Edge browser in remote-debugging mode and auto attaching the tools.
• SideBar view for listing all the debuggable targets, including tabs, extensions, service workers, etc.
• Fully featured Elements and Network tool with views for HTML, CSS, accessibility, and more.
• Screen-casting feature to allow you to see your page without leaving VSCode.
• Go directly to the line/column for source files in your workspace when clicking on a link or CSS rule inside the Elements tool.
• Auto attaches the Microsoft Edge Tools when you start debugging with the Debugger for Microsoft Edge extension.