Debugging in Chrome

Use VSC + Chrome to debug your JavaScript code

Make sure that the Debugger for Chrome extension is installed

Setup

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.

Debug

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"
}
]
}