Debugging in VSCode

This guide only works for Visual Studio Code

To start debugging, you must complete 3 steps sequence:

1. Install VSCode extension

2. Configure VSCode debugger

3. Launch the debugger

1. Install a VSCode extension

Install following extensions for VSCode:

Firefox

Install "Debugger for Firefox" extension.

Chrome

Install "Debugger for Chrome" extension.

2. Configure VSCode debugger

Firefox

Open a file you wish to debug in Visual Studio Code. In the side panel, open the Run tab. Click create a launch.json file, then select the Firefox option. Configure the generated file as follows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "firefox",
            "reAttach": true,
            "name": "Launch Firefox against localhost",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Chrome

Open a file you wish to debug in Visual Studio Code. In the side panel, open the Run tab. Click create a launch.json file, then select the Chrome option. Configure the generated file as follows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Set url to the URL of your app, most likely http://localhost:3000/. Other settings can remain the same.

3. Launch the debugger

Click "Launch Chrome against localhost" in the "Run" tab. You should now be able to pause at breakpoints and view the console output.

Troubleshooting

[debugger for chrome] Error processing "launch": Can't find Chrome

This can occur if the debugger expects a different executable than the one you have installed. For example, you might have google-chrome-stable or Chromium installed instead of the more common Chrome.

In this case, you can specify which executable the extension should use by setting runtimeExecutable in the JSON config.

{
    "configurations": [
        {
            // [...]
            "runtimeExecutable": "/snap/bin/chromium"
        }
    ]
}