Debugging JavaScript, DOM, CSS and accessing the browser console without leaving Visual Studio Code

Now that Visual Studio Code has an in-built JavaScript debugger, it has become incredibly convenient to debug your project without leaving the editor. You can debug JavaScript, tweak CSS and the DOM and interact with the browser Console right inside VS Code. And you don’t need to know which extensions to install as the editor guides you along the way.

Under the hood, this uses the JS Debugger and the Edge Tools for VS Code extensions. Here’s what the flow looks like:

If you haven’t got the Edge Tools extension installed, VS Code will prompt you to do so the first time, as shown in this screencast:

In addition to breakpoint, DOM and CSS debugging, Visual Studio Code’s Debug Console now also is the same Console you normally get in the browser. You can access the window object of the browser instance and use all the Console Utilty Methods like `$` and `$$`.

To run the debugger automatically on your project, you need to create a `launch.json` file and define the debugger as the launch type. The Edge Tools extension can also do that automatically for you. If your application is not on `localhost:8080` you need to tweak the `url` parameter.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

If you want to see this in action, you can download/fork the demo to-do app I used in the screencasts.

What do you think? Anything you’re still missing in that workflow? File an issue on GitHub and tell us about it!