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

Comments

[Peter Franken]

I've been using this off and on for a few months now and I highly recommend everyone to check it out.

Not having to constantly switch between windows/spaces/virtual desktops is massive for keeping track of where you were wanting to do what. Perfect for my ADHD brain!

It's ridiculously easy to setup, I personally haven't experienced any crashes/bugs/slowdowns, and it's gratis. Go for it :)

Some things I'd love to see added down the line include automatic visual testing (opportunity to integrate with the upcoming VSCode native testing UI?), browser performance profiler, lighthouse integration, and displaying multiple screen sizes at once.

[Christian Heilmann]

Thank you, we're working on the multiple screen size idea. I haven't seen the native testing UI yet, and will investigate. We won't be implementing lighthouse, as it is a third party service, but we're working on integrating the issues panel data into the extension, much like the webhint extension does.

[Peter Franken]

That sounds great, looking forward to see those new features in action!

You and your colleagues have been killing it with Edge too. It's been ages since it last crashed (jinxed now of course 😉), amazing performance and low energy use on my MBP (getting scary close to Safari even!), the unique devtool features and these integrations are actually really useful, and as the cherry on top you finally got the sync feature working for 365 Business Standard tenant accounts :)

The only way I know how to access VSCode's native testing UI is through the Test Explorer UI extension which automatically installs microsoft/vscode-test-adapter-conv.... You then replace the extension's UI with the native one using the testExplorer.useNativeTesting setting.