VS Code receives Edge Tools

VS Code receives Edge Tools

The announcement as made by Microsoft makes Microsoft Edge tools extension available in Visual Studio Code providing developers option to embed into the browser as pleased.

The extension which has been in beta for about a year now, doubles in features with two experimental Developer Tools functionalities coming 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 allows for your use of 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.

Supported Features

  • Debug configurations for launching Microsoft Edge browser in remote-debugging mode and auto attaching the tools,
  • Side Bar 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 VS Code.
  • 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 attach the Microsoft Edge Tools when you start debugging with the Debugger for Microsoft Edge extension.
VS Code - Edge Tools extension Demo

More Information

Share with