'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.

node.jsnpmvisual-studio-codeelectron


Solution 1:[1]

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.

(Well, it seems the same as npm start, but looks likely debugging support will work, so that seems decidedly 'better' for development purposes.)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James T Snell

Related Questions