CODEWITHSUNDEEP
node.jsnpmvisual-studio-codeelectron
user3738290
user3738290

Reputation: 445

Debugging an electron app in Visual Studio Code

Could I please ask for help with the following?

I have an electron app (basically the quick start app so very very simple).

I am viewing the code with Visual Studio Code. I run the project from the terminal window in Visual Studio Code with the command "npm start". All works fine.

I want be able to debug the electron code in main.js. So I clicked on "Run and Debug" and selected "Create a launch.json file". From the subsequent drop down I then selected "Node.js". This produces the launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\main.js"
        }
    ]
}

If I now click on "launch Program" I get:

Error: Cannot find module 'electron'

I have electron installed globally, so I added this line:

"runtimeExecutable": "C:\\Users\\MyUserName\\AppData\\Roaming\\npm\\node_modules\\electron\\dist"

Now I get:

C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist .\main.js
Error: spawn C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

Thanks for any advice that enables me to run and debug this via the "Run and Debug" button rather than just running it via "npm start" from the terminal window.

Upvotes: 2

Views: 4931

Answers (1)

James T Snell
James T Snell

Reputation: 1678

The solution I found is here: https://www.electronjs.org/docs/latest/tutorial/debugging-vscode

The launch.json that they give at that address is:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

I copy and pasted the above in to my launch.json and my Electron app immediately started working in VS Code just like when I manually call 'npm start' from the console. Except it's better than just 'npm start' because for the server-side js files, debug breakpoints actually work!

Upvotes: 3

Related Questions