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
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.
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...
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.
On OSX the path to electron is
"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron",
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.
electron
instead of electron-prebuilt
. See http://electron.atom.io/blog/2016/08/16/npm-install-electronnode_modules/.bin/electron
to launch electron
electron.cmd
, not electron.exe
.Here are two pre-configured projects: https://github.com/octref/vscode-electron-debug.
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}"
}
]
}