Debugging Electron application with Visual Studio Code

Electron is framework that lets you run cross-platform web apps on desktop. Visual Studio Code is one those cross-platform apps that is written with Electron. To create simple Electron application all you need is three files: package.json, main.js and index.html for this example I used this sample application

After all project files are created open debug panel and click configure button which will create settings launch.json file with debug configuration.

 

We will need only configuration with name “Attach”.

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858
        }
    ]
}

Start Electron application with debugging enabled:

electron --debug=5858 hello-world/

In debug panel choose “Attach” configuration and press “Start” or F5.

After few seconds if everything went successfully you should see debug commands:

 

Try setting breakpoint in application close event:

 

And close application to test break point:

Note that you can debug only nodes back end JavaScript code, client side script debugging is not supported.

Source Code