Add recipe for Electron

[auchenberg]

Write guide on how to debug both Electron processes via composites

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron: Main",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",            
            "runtimeArgs": [
                "--remote-debugging-port=9222",
                "."
            ],
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            }
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9222
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main",
                "Electron: Renderer"
            ]
        }
    ]
}

[weinand]

@auchenberg yes, a Electron recipe is really needed...

And with VS Code 1.14 it is getting simpler. The Windows specific runtimeExecutable should no longer be needed.

[auchenberg]

Found an old electron demo app https://github.com/auchenberg/electron-quick-start-vscode

[rkpatel33]

Hi guys, I am new to VS Code, as well as remote debugging with Chrome in general, so I have a basic question:

I have an internal Electron app that I would like to use the VS Code debugger on. I pasted in the above into my VS Code launch.json file. I then hit F5 to run and everything seems to launch ok, but I don't know what to do next, like what URL to go in Chrome based on this output:

Debugging with inspector protocol because a runtime executable is set.
/Users/rishi/Projects/albert/albert-support-desktop/node_modules/.bin/electron --inspect=45437 --debug-brk --remote-debugging-port=9222 . 
Debugger listening on port 45437.
Warning: This is an experimental feature and could change at any time.

I tried poking around on chrome://inspect/ but don't see anything on the various tabs that seems relavent. I feel like I am missing something pretty basic here.

Here is a screenshot of of my VS Code:

[auchenberg]

@rkpatel33 Your setup looks correct, and it looks like your Electron app has a few script errors, which are displayed in the debug console.

You don't need Chrome DevTools or chrome://inspect but you should be able to go to your Electron JavaScript files and set breakpoints from within VS Code.

[rkpatel33]

Thanks for the reply. So the breakpoints are working now, and I am also able to see a list of all the processes running in chrome://inspect. Both of these things weren't happening (I think) before. So I seem to be all good!

[auchenberg]

Bug found for our composite configuration: https://github.com/Microsoft/vscode-chrome-debug/issues/501