Debugging and Running Javascript in VSCode Electron

Feedback


Question:

I employ

npm-run-all

for executing

npm start

and

npm electron .

. Although I intend to enable debugging using VSCode, I am uncertain about how to compose the launch configurations.

At present, my settings are as follows. However, upon starting the debugging, I only receive the code

C:Program Filesnodejsnpm.cmd dev --inspect-brk=32367


.

What is the process for connecting the debugger to the electron?


package.json

{
  ...
  "homepage" : "./",
  "main": "src/main.js",
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "npm-run-all --parallel electron start"
  },
  ...
}


launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "env": {
                "NODE_ENV": "development"
            },
            "windows": {
                "runtimeExecutable": "npm"
            },
            "runtimeArgs": [
                "dev"
            ]
        }
    ]
}


Solution:

The chrome debugger extension for VSCode was not added. However, the settings are now functioning properly with the inclusion of

run-script

arguments.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "dev"
            ],
            "port": 9229
        },
    ]
}

Frequently Asked Questions