Visual Studio Code Now Includes Built-In JavaScript Debugging

Extensibility is one of the key advantages of Visual Studio Code, but JavaScript debugging is so common that Microsoft now builds it into the code editor.

“If you’re debugging JavaScript in Visual Studio Code you probably have used either the Chrome Debugger or the Microsoft Edge Debugger extension,” the Microsoft Edge Team writes in the announcement post. “Neither [is] necessary any longer to debug as JavaScript debugging is now built-in to Visual Studio Code. This does not only mean that you can uninstall these extensions, but we also made debugging more convenient.”

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.

Now, web developers who use Visual Studio Code and target Google Chrome or Microsoft Edge can debug their JavaScript code by pressing F5 while using the editor, or by activating the debug icon in the menu bar and selecting “Run and debug”. (You can also run “Debug: Open Link” from Visual Studio Code’s command palette and then choose to debug in Chrome, Edge, or Node.js, none of which requires an extension.)

Those who do choose Microsoft Edge will see a new Inspect button that launches the Edge Developers Tools directly inside of Visual Studio Code. The first time you do make this choice, you will have to install an extension, but then it will just work instantly after that. The Inspect tool lets you inspect the web page’s Document Object Model (DOM), make changes to its Cascading Style Sheets (CSS), see network requests, and more, without leaving the editor. You can also use the Debug Console in the editor to interact with the document in the browser, just as you do with the Console in the Edge Developer Tools.

You can learn more about this functionality in the debugger extension’s README file on GitHub.

Tagged with

Share post

Please check our Community Guidelines before commenting

Conversation 7 comments

  • johannes

    16 July, 2021 - 4:36 pm

    <p>This could be huge if it works well, can’t wait to try it out! Nice!</p>

  • darkgrayknight

    Premium Member
    16 July, 2021 - 5:22 pm

    <p>You can also do JavaScript debugging with npm/node.js in the terminal. This also applies to TypeScript debugging. This is really great.</p>

  • blue77star

    16 July, 2021 - 5:49 pm

    <p>I think on the long run Microsoft will try to replace Visual Studio with this.</p>

    • mattbg

      Premium Member
      17 July, 2021 - 8:37 am

      <p>My thinking is that, in the long run, Teams will replace Visual Studio Code.</p>

    • garumphul

      Premium Member
      17 July, 2021 - 1:20 pm

      <p>Nope. Not a chance. </p>

    • wright_is

      Premium Member
      18 July, 2021 - 5:25 am

      <p>I hope not. It is an Electron app and brings hundreds of megabytes needless bloat with it. The "real" Visual Studio is big enough, without having to calculate in the Electron overhead…</p>

  • tonchek

    18 July, 2021 - 3:06 pm

    <p>Both VSs will stay. Both are really good but for different workloads. There is some overlap, but still… </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