Microsoft Brings Edge Dev Tools to Visual Studio Code

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.”

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday — and get free copies of Paul Thurrott's Windows 11 and Windows 10 Field Guides (normally $9.99) as a special welcome gift!

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

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

Share post

Please check our Community Guidelines before commenting

Conversation 13 comments

  • rmac

    01 October, 2020 - 6:16 pm

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

    • Paul Thurrott

      Premium Member
      02 October, 2020 - 7:23 am

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

      • lilmoe

        02 October, 2020 - 1:03 pm

        <blockquote><em><a href="#581569">In reply to paul-thurrott:</a></em></blockquote><p>VS proper is mainly used for .NET Framework applications and other enterprise features that are not supported in VS Code for obvious reasons. </p><p><br></p><p class="ql-indent-1">"Also, I bet web dev is the primary use case for VS Code."</p><p><br></p><p>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. </p><p><br></p><p>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…</p><p><br></p><p>See the trend here?</p>

        • oscar1

          02 October, 2020 - 9:06 pm

          <blockquote><em><a href="#581655">In reply to lilmoe:</a></em></blockquote><p>Spoken like a true web monkey. </p>

      • rmac

        02 October, 2020 - 3:00 pm

        <blockquote><a href="#581569"><em>In reply to paul-thurrott:</em></a><em> 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 asp.net 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).</em></blockquote><p><br></p>

        • rmac

          02 October, 2020 - 4:47 pm

          <blockquote><a href="#581657"><em>In reply to rmac:</em></a><em> 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… </em></blockquote><p><br></p>

  • MutualCore

    01 October, 2020 - 9:30 pm

    <p>Edge Beta is crashing again.</p>

  • tomschenkenberg

    02 October, 2020 - 7:03 am

    <p>Love it! Perfect for web development.</p><p><br></p><p>I do think that there will come a time when you no longer can call this "<span style="color: rgb(0, 0, 0);">Visual Studio Code, Microsoft’s </span><strong style="color: rgb(0, 0, 0);">lightweight</strong><span style="color: rgb(0, 0, 0);"> code editor". </span></p>

    • Paul Thurrott

      Premium Member
      02 October, 2020 - 7:18 am

      That will only happen if the real Visual Studio slims down.

  • murray judy

    02 October, 2020 - 10:49 am

    <p><em style="color: rgb(0, 0, 0);">… and is now exiting preview for the first time,” the Microsoft Edge Team writes.</em></p><p><br></p><p>How many times are they expecting it to exit preview?</p>

  • jdawgnoonan

    02 October, 2020 - 6:12 pm

    <p>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. </p>

    • Paul Thurrott

      Premium Member
      03 October, 2020 - 9:01 am

      🙂 Nice!

  • saint4eva

    03 October, 2020 - 11:05 am

    <p>This is lovely.</p>

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2024 Thurrott LLC