• Post category:Cloud
  • Post comments:0 Comments
  • Post author:
  • Post published:17/07/2021
  • Post last modified:17/07/2021

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 JavaScript, Visual Studio Code

Leave a Reply