Debugging in VSCode
This guide only works for Visual Studio Code
To start debugging, you must complete 3 steps sequence:

1. Install a VSCode extension

Install following extensions for VSCode:
Firefox
Chrome
Install "Debugger for Firefox" extension.
Install "Debugger for Chrome" extension.

2. Configure VSCode debugger

Firefox
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 Firefox option. Configure the generated file as follows:
1
{
2
"version": "0.2.0",
3
"configurations": [
4
{
5
"type": "chrome",
6
"request": "firefox",
7
"reAttach": true,
8
"name": "Launch Firefox against localhost",
9
"url": "http://localhost:3000/",
10
"webRoot": "${workspaceFolder}"
11
}
12
]
13
}
Copied!
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:
1
{
2
"version": "0.2.0",
3
"configurations": [
4
{
5
"type": "chrome",
6
"request": "launch",
7
"name": "Launch Chrome against localhost",
8
"url": "http://localhost:3000/",
9
"webRoot": "${workspaceFolder}"
10
}
11
]
12
}
Copied!
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.
1
{
2
"configurations": [
3
{
4
// [...]
5
"runtimeExecutable": "/snap/bin/chromium"
6
}
7
]
8
}
Copied!