Electron main process debugging with Visual Studio Code

It turned out that debugging Electron’s main process is not trivial. I did not manage to make it work with node-inspector. Surprisingly, I turned out that it is relatively easy to set up end to end Electron development environment with Visual Studio Code. All you really need is create default “launch.json” file by using the cog icon in debugging tab. With the default setting you should be to attach to a running electron app but you can not use “Launch” profile with its default content. You have to specify electron.exe location in “runtimeExecutable” – just like on the screenshot below.

image-4

Once you have done that, you will be able to start your Electron app straight from debugging tab in your Code window.

So when you start debugging using “Launch” profile (not “Attach” nor “Attach to process”), you will notice that your application is running…

image-5

… and your breakpoints are being hit too.

image-3

Which makes Visual Studio Code pretty neat IDE for designing electron.atom.io powered desktop applications.

You can find full launch.json code I have used with my setup (electron quick-start sample app) attached below:

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch”,
“type”: “node”,
“request”: “launch”,
“program”: “${workspaceRoot}\\main.js”,
“stopOnEntry”: false,
“args”: [],
“cwd”: “${workspaceRoot}”,
“preLaunchTask”: null,
“runtimeExecutable”: “${workspaceRoot}\\node_modules\\electron\\dist\\electron.exe”,
“runtimeArgs”: [
],
“env”: {
},
“externalConsole”: false,
“sourceMaps”: false,
“outDir”: null,

“port”: 5858,
“address”: “localhost”,
},
{
“name”: “Attach”,
“type”: “node”,
“request”: “attach”,
“port”: 5858,
“address”: “localhost”,
“restart”: false,
“sourceMaps”: false,
“outDir”: null,
“localRoot”: “${workspaceRoot}”,
“remoteRoot”: null
},
{
“name”: “Attach to Process”,
“type”: “node”,
“request”: “attach”,
“processId”: “${command.PickProcess}”,
“port”: 5858,
“sourceMaps”: false,
“outDir”: null
}
]
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: