Can Visual Studio Code be configured to launch electron

Question

Since Visual Studio Code was created using Electron, I'm guessing that launch.json might be configured to properly launch an app using Electron. But I've not figured out how to do it yet.

Also since Electron is based on io.js, itself based on Node.js, I'm thinking maybe... it can be done, but haven't found the magic yet.

Tried something along these lines... snippet from launch.json:

"configurations": [
    {
        // Name of configuration; appears in the launch configuration drop down menu.
        "name": "Launch Electron",
        // Type of configuration. Possible values: "node", "mono".
        "type": "node",
        // Workspace relative or absolute path to the program.
        "program": "Y:\\dev\\electron\\electron.exe",
        // Automatically stop program after launch.
        "stopOnEntry": false,
        // Command line arguments passed to the program.
        "args": ["CrawlSpace_Electron\\"],
        // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
        "cwd": ".",
        // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
        "runtimeExecutable": null,
        // Environment variables passed to the program.
        "env": { }
    },

It does start Electron, but fails (window vanishes too fast to see exactly why).

Any thoughts?

Debugging Electron in Visual Studio Code - revised: http://electron.rocks/debugging-electron-in-vs-code-revised/ — Amir Saniyan, Sep 15 '16 at 18:55

Shawn Rakowski · Answer 1 · 2016-11-18T03:05:48.573

If you specify electron.exe as the runtimeExecutable (as previously suggested) you can pass the main.js file as the program and it will work. Electron allows you to specify the directory OR the main.js file since that is pretty much what the package.json points to. Using the configuration below in my launch.json file, pressing F5 both launched Electron with my app and connected the debugger to the main process (eventually)...

{
    "name": "Launch Electron",
    "type": "node",
    "program": "${workspaceRoot}/app/main.js", // ensure this is path to main.js file
    "stopOnEntry": false,
    "args": [], 
    "cwd": "${workspaceRoot}",
    // as you have noted, this is also important:
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},

My main.js file is in the app folder I normally would pass to Electron.

Works as advertised. Just had to change `program` for my config. — Byron Wall, Jul 17 '15 at 02:00
In addition to the solution I had to add "request": "launch". It worked. — Jonas Johansson, Mar 09 '20 at 03:00

score 3 · Answer 2 · answered Sep 19 '16 at 02:10

Yes, it could. Not only could VSCode launch Electron, it could also debug it.

Using node you can debug Electron's Main process, but with Debugger for Chrome you can also debug Electron's Renderer process. I wrote a blog post on this topic: http://code.matsu.io/1.

The current highest upvoted answer is a bit outdated.

You should use electron instead of electron-prebuilt. See http://electron.atom.io/blog/2016/08/16/npm-install-electron
You should use node_modules/.bin/electron to launch electron
On Windows it's electron.cmd, not electron.exe.

Here are two pre-configured projects: https://github.com/octref/vscode-electron-debug.

One configured to run electron/electron-quick-start
One modified from electron/electron-quick-start to use ES6 & Babel & Webpack.

Here is the launch.json for the first project. To run the target "Debug Renderer Process", you need to install Debugger for Chrome. But "Debug Main Process" works fine on vanilla VSCode.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      // Use the following for Windows
      // "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
      "program": "${workspaceRoot}/main.js"
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      // Use the following for Windows
      // "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
      "runtimeArgs": [
        "${workspaceRoot}/main.js",
        "--remote-debugging-port=9222"
      ],
      "webRoot": "${workspaceRoot}"
    }
  ]
}

Good stuff, worked for me. Only thing is you should change all your forward slashes to escaped backslashes (from / to \\\). Also, I added an extra option to the Debug Main Process configuration: `"console": "integratedTerminal"` — d_scalzi, Apr 23 '17 at 02:18
@d_scalzi forward slashes are correct for Unix systems, including macOS. `path.sep` could be used to make this cross-platform, but how many different computers do you *build* from anyways. — Ethan Ray, Feb 01 '23 at 15:37

score 1 · Answer 3 · answered May 11 '15 at 10:48

1

In theory the following should work: Specify the electron.exe as the "runtimeExecutable" (since it replaces the node runtime). The electron program ("CrawlSpace_Electron\") becomes the "program". VSCode automatically passes a "--debug-brk" or "--debug" to electron.exe. In practice VSCode does not yet support this setup because the preview version of VSCode tries to verify that the "program" attribute is a file that exists on disk. But for electron the "program" must be a directory. I have created a bug on our side and will make sure it’s fixed with the next release.

answered May 11 '15 at 10:48

Andre Weinand

1,907
11
8

Could we ask when the behavior that VSCode automatically passes a "--debug-brk" or "--debug" to electron.exe will be changed? Thank you. – Frank Feb 16 '18 at 02:02
My comment from 2015 is no longer correct. What is exactly your problem with VS Code and Electron? Please see this recipe: https://github.com/Microsoft/vscode-recipes/tree/master/Electron – Andre Weinand Feb 17 '18 at 23:28
In launch.json , a runtimeExecutable with electron 1.6.7 is reserved for the inspector protocol rather than the legacy protocol . So, I tried the prelaunch task with electron 1.6.7 with no sucesss. How do I set up a launch.json using electron 1.6.7 and node 6.11.1 to seamlessly debug a compound launch configuration using the legacy protocol with a 1) Electron Main,2) followed by a gdb cppdbg for a c++ addon and 3) finally followed by Attach to node? Thank you. – Frank Feb 18 '18 at 02:56
Exactly what is my problem with VSCode and Electron is described in the article, https://superuser/questions/1295962/how to seamlessly debug,multitarget Electron debug with VSCode using the legacy protocol , electron 1.6.7, node 6.11.1, vscode 1.17 and firefox. Thank you. – Frank Feb 18 '18 at 07:01
I apologize for my earlier typographical error, The exact nature of my problem with VSCode and Electron is described in the article, https://superuser.com/questions/1295962/how-to-seamlessly-multi-target-electron-debug-with-vscode-using-the-legacy-proto. How do we solve this problem? Thank you. – Frank Feb 18 '18 at 16:40

score 1 · Answer 4 · answered Aug 29 '20 at 05:17

I know this is just 1 link but it's the answer everyone needs...

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

Here are the attributes documented for launch.json. Unsure if the list is currently complete, but it should at least help...

score 0 · Answer 5 · edited Sep 10 '16 at 19:54

0

On OSX the path to electron is

"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron",

edited Sep 10 '16 at 19:54

Petter Friberg

21,252
9
60
109

answered Sep 10 '16 at 19:52

carcus88

137
1
7

Can Visual Studio Code be configured to launch electron

5 Answers5

Linked