← back to the blog


Visual Studio Code - Launching Browser on Debug

Posted on February 7th, 2017 in development, node.js by Simon

Step 1 - Pick Your Poison

Personally I like debugging in Firefox, but if you prefer Chrome that's cool too. Just install the relevant extension for your choice (or many if you wish):

Step 2 - Add Launch Configuration

Each of the extension pages above has a launch configuration that you need to add to the .vscode\launch.json file example to get it working, for example for Firefox you might add:

{
    "name": "Launch localhost",
    "type": "firefox",
    "request": "launch",
    "url": "http://localhost:8080/",
    "webRoot": "${workspaceRoot}"
}

For Chrome you might add:

{
    "name": "Launch localhost",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost/mypage.html",
    "webRoot": "${workspaceRoot}/app/files"
}

This will give you an extra option in your Launch drop down list called "Launch localhost".

Step 3 - Chaining Configurations

If, like me, you want to now launch your application as well as your browser, you have a dilemma. So far we can only launch one configuration at a time, meaning we have to start both our app (possibly called "Launch Program") and our browser (now called "Launch localhost").

In order to launch both of these configurations, we need to create a "compound" in the .vscode\launch.json file.

The result in my case is a file that looks like this:

{
    "version": "0.2.0",
    "compounds": [
        {
            "name": "Launch & Debug",
            "configurations": [ "Launch Program", "Launch localhost" ]
        }
    ],
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\app.js",
            "cwd": "${workspaceRoot}"
        },
        {
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "url": "http://localhost:8080/",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Hope this helps!