Microsoft Brings Edge Dev Tools to Visual Studio Code

Posted on October 1, 2020 by Paul Thurrott in Microsoft Edge, Dev with 10 Comments

Microsoft announced today that its Microsoft Edge Tools extension for Visual Studio Code is now available.

“The new Microsoft Edge Tools for VS Code extension … has been significantly improved and is now exiting preview for the first time,” the Microsoft Edge Team writes in a new blog post. “With this release, we’ve merged the functionality of two experimental extensions that brought Developer Tools functionality to Visual Studio Code: The Elements and the Network extension. We also made it easier to contribute and build the extension yourself and smoothed out some of the rough edges.”

For those unfamiliar with these tools, Microsoft—like Google and other browser makers—provides a comprehensive suite of web developer tools inside of Microsoft Edge. (They’re sometimes referred to as the “F12” tools because they are most easily invoked by pressing F12.) What this new extension does is embed these browser developer tools directly in Visual Studio Code, Microsoft’s lightweight code editor.

“Why embed developer tools in an editor?” the team asks rhetorically. “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.”

And adding this functionality as an extension makes sense, Microsoft says, because it can iterate it based on feedback more quickly and not add to the overhead of editor.

You can get the Microsoft Edge (Chromium) Tools for VSCode from the Visual Studio Marketplace.

Tagged with

Join the discussion!


Don't have a login but want to join the conversation? Become a Thurrott Premium or Basic User to participate

Comments (10)

10 responses to “Microsoft Brings Edge Dev Tools to Visual Studio Code”

  1. rmac

    ooohh, lovely. All we need now is some direction that VS Code is to subsume VS (otherwise, why would one advertise such a feature?)

    • Paul Thurrott

      That will never happen. Also, I bet web dev is the primary use case for VS Code.
      • lilmoe

        In reply to paul-thurrott:

        VS proper is mainly used for .NET Framework applications and other enterprise features that are not supported in VS Code for obvious reasons.

        "Also, I bet web dev is the primary use case for VS Code."

        Web devs make the absolute majority of developers in the world, and VS Code has a massive 50% share of these devs (Stack Overflow). Also, 8 million C# devs have downloaded the C# extension for VS Code. 25 million Python extension downloads, 14 million for C++, 5.6 million for Java, and many other millions of downloads of extensions for other languages. While Python and Java aren't exactly VS proper forte, .NET framework is also on its way out.

        VS will be a legacy support IDE for legacy enterprise applications. It's only a matter of time until most are migrated to .NET Core, and their UI layers are migrated to web...

        See the trend here?

      • rmac

        In reply to paul-thurrott: well let's hope the extension becomes available in VS then otherwise instead of 'cognitive load' being imposed (as the Edge team put it) i.e. IDE to browser, for me it's going to be whilst switching from IDE to IDE, which right now would be a small price to pay. The current design window in is pants in comparison. MS cleaned it up back a few years following complaints it re-formatted layouts but it's gone backwards again and the rendering is nowhere like that shown here. Equally if you try a 'forrmat selection' then do a few undos and redos, and any page edits wildly screw up. Inspecting elements via Chredge is pretty tedious too so this extension has to be welcome news indeed, just a bit perplexing that Code gets the attention first (if VS at all on this one).

        • rmac

          In reply to rmac: just tried it out and the visual rendering is not brilliant. Clearly the screenshot is of a picture and not of rendered text. MS would be just as well to embed a webview control in VS (if that isn't what they've done here). But the point is MS are making an effort to create some WYSIWYG tools and that's to be commended (NICE TO SEE SOME ACTION ON THE UI FRONT). I would only say this kind of stuff needs to be world class to compete with the Flutter-Adobe effort albeit that's mobile client vs. web. Keep it coming, MS...

  2. MutualCore

    Edge Beta is crashing again.

  3. tomschenkenberg

    Love it! Perfect for web development.

    I do think that there will come a time when you no longer can call this "Visual Studio Code, Microsoft’s lightweight code editor".

  4. murray judy

    ... and is now exiting preview for the first time,” the Microsoft Edge Team writes.

    How many times are they expecting it to exit preview?

  5. jdawgnoonan

    Irrelevant to the conversation, but the bridge in the picture in the Code editor is of a bike trail bridge just north of Des Moines, Iowa, where I live. It is the High Trestle Trail and I have crossed it many times. When you live in "Fly Over Country" it is great seeing a local landmark in content like that.

  6. saint4eva

    This is lovely.