Edge Browser Dev Tools for VS Code Now Generally Available

Microsoft has moved its Edge browser development tools for Visual Studio Code from preview to general availability, providing in-editor web site debugging and other functionality.

Because the company seeks to keep its popular open source, cross-platform code editor as lightweight as possible, the functionality comes in an extension.

The "Microsoft Edge Tools for VS Code" extension -- available from the editor's marketplace or via in-editor installation -- supports these 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.

"The DevTools will connect to an instance of Microsoft Edge giving you the ability to see the runtime HTML structure, alter layout, fix styling issues, and view network requests. All without leaving VS Code," says the project's GitHub site.

The company earlier this month announced the general availability of the extension, bringing it out of the preview stage.

The idea is to provide easier tweaking of the look and feel of web projects at the same time the code is programmed.

"Continuously switching between editor and browser adds cognitive load to your workflow throughout the day," Microsoft said in a post earlier this month. "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."

New features of the GA release include:

  • New headless and full-browser modes: Launching the Microsoft Edge browser for debugging can be done by:
    • Connecting to an existing running instance of Edge
    • Launch a new instance navigated to your app
    • Use a "headless" browser: This is an alternative to the "normal" mode in which a full browser window is provided for interaction, accessed with an extra browser icon in the task bar. In the headless mode, the browser doesn't pop up in a separate window but instead is embedded directly into VS Code.
      New Headless Mode in Animated Action
      [Click on image for larger, animated GIF view.] New Headless Mode in Animated Action (source: Microsoft).
  • A new Network pane: A new setting allows developers to enable a new Network tab for inspecting any network request of the attached browser. Network inspection -- which Microsoft said was the second-most-used feature in the Microsoft Edge DevTools -- was previously provided in a separate standalone extension. For now, it's disabled by default, though that could change.
  • Easier contributions: Developers can now more easily contribute to the project after an architecture change. "In the past, you needed to download and build the whole of Chromium to contribute, now we only ask you to get the parts you need for the extension and wrote a few scripts to make the process easier." Contributing details are provided here.

The VS Code Marketplace says the Edge Tools extension has been installed 42,737 times as of this writing, earning an average 4.6 rating (scale to 5) from nine developer who reviewed it.

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus


  • C# Slides in Usage Ranking of Programming Languages

    "The fact that C# lost three places in the ranking of language communities during the last three years is mostly explained by its slower growth compared to C/C++ and PHP."

  • Telerik UI for Blazor Updated

    Progress announced an update to its Telerik UI for Blazor components, targeting Microsoft's open source Blazor framework that lets C# coders create web apps without having to rely upon JavaScript.

  • Infragistics Unveils UI Components for Blazor

    Infragistics, specializing in third-party UI/UX controls and tools, unveiled a new offering targeting Blazor, Microsoft's red-hot open source framework that allows for C#-based web development instead of traditional mainstay JavaScript.

  • AWS Open Sources Tool for Porting .NET Framework Apps to .NET Core

    Leading cloud computing platform Amazon Web Services open sourced the it announced in July for helping users port old .NET Framework applications to the new .NET Core framework.

  • Uno Platform Ports Windows Calculator to Linux

    Uno Platform has ported the famed Windows Calculator, open sourced last year, to Linux as part of a continuing "proof point" effort to demonstrate the reach of what it describes as the sole UI offering available to target Windows, WebAssembly, iOS, macOS, Android and Linux with single-codebase applications coded in C# and XAML.

Upcoming Events