Visual Studio Code Now Includes Built-In JavaScript Debugging

Posted on July 16, 2021 by Paul Thurrott in Google Chrome, Microsoft Edge, Web browsers, Dev with 7 Comments

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

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 ,

Join the discussion!


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

Comments (7)

7 responses to “Visual Studio Code Now Includes Built-In JavaScript Debugging”

  1. johannes

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

  2. darkgrayknight

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

  3. blue77star

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

    • mattbg

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

    • garumphul

      Nope. Not a chance.

    • wright_is

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

  4. tonchek

    Both VSs will stay. Both are really good but for different workloads. There is some overlap, but still...