Sunday, June 26, 2022
Home Gaming Easier browser debugging with Developer Tools integration in Visual Studio Code

Easier browser debugging with Developer Tools integration in Visual Studio Code

If you’re debugging JavaScript in Visual Studio Code you probably have used either the Chrome Debugger or the Microsoft Edge Debugger extension. Neither are 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.

To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting “Run and debug”. Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command. From there on you can choose to debug in Chrome, Edge or Node.js without having to install any extensions.

If you choose Edge, you’ll notice an extra feature in the debug toolbar: an inspect button.

Screenshot of the inspect button in the debug toolbar

This button launches the Edge Developer Tools right inside your Visual Studio Code instance. The first time you activate this button, the editor will ask you to install the Microsoft Edge DevTools for Visual Studio Code extension. Once you have this one installed you won’t be prompted again.

Prompt to install the Microsoft Edge DevTools extension

You can then inspect the DOM, change CSS, and see network requests of your project running in the browser without leaving Visual Studio Code.

Screenshot of the Elements inspector in VS Code

As a bonus, you can also use the Debug Console in the editor to interact with the document in the browser, much like you would with the Console in the browser developer tools. You have full access to the window object and can use the Console Utilities API.

Screenshot of the debug console

If you want to automatically attach to Microsoft Edge and launch the Developer Tools in the editor, you can create a launch.json file. Notice that `https://localhost:8080` probably needs to be changed for your project.

  "version": "0.2.0",
  "configurations": [
      "type": "vscode-edge-devtools.debug",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"

If you want to take a deep-dive into the features of the built-in JavaScript debugging workflow of Visual Studio Code, you can check the README file of the debugger extension.

We hope that by automatically including the option to debug with browsers into Visual Studio Code we made the process easier to get started and would love to learn what else we can do to make you more effective in your debugging journey. Send feedback (Alt-Shift-I with the DevTools open) or reach out to the team on Twitter to let us know what you think!

- Advertisment -

Most Popular

Local Saskatoon Bakery celebrates 90th anniversary

Christies Bakery on 33rd Street was established in 1932 by the Christie brothers. “My parents bought it in 1965, so that’s when they really recreated...

Body of missing Kelowna, B.C. woman found: RCMP

The body of a missing Kelowna woman has been found. Chelsea Cardno was reported missing on Tuesday, June 14, with police believing she had been...

Elks still winless after 30-23 loss to Stampeders

Quarterback Bo Levi Mitchell validated a late decision to play and Malik Henry overcame a couple early gaffes with the go-ahead touchdown for the...

PGA Tour Canada cancels Elk Ridge Open due to recent heavy rain

The 2022 Elk Ridge Open golf tournament has been cancelled because PGA TOUR Canada felt that course conditions weren’t up to their standard due...