Debugging in VSCode
This guide only works for Visual Studio Code
To start debugging, you must complete 3 steps sequence:
Install following extensions for VSCode:
Firefox
Chrome
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:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "firefox",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:3000/",
"webRoot": "${workspaceFolder}"
}
]
}
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.Click "Launch Chrome against localhost" in the "Run" tab. You should now be able to pause at breakpoints and view the console output.
[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"
}
]
}
Last modified 2yr ago