Debugging Electron in Visual Studio Code

IMPORTANT: Be sure to check out revised post as well.

Recently I switched from Sublime to Visual Studio Code. A lot of people have put in a good word so I wanted to check it out.

It is quite minimalistic but yet powerful through customisation. Magic shortcuts the same as in Sublime: Cmd+P to navigate to file and Cmd+Shift+P (or F1) to run command. I'm not gonna review it; you can give it a spin and look for yourself. Rather, I'm going to write about developing Electron apps with it.

VS Code offers ability to create launch configurations which you can then run. You can either launch program or attach to it. If you click open Debug panel and click on Configure button (gear icon), it will create launch.json file with some predefined configuration. You can scratch that and write this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "main.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "runtimeArgs": [
                ".",
                "--enable-logging"
            ],
            "env": {},
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

Since I didn't find any good and concise explanation of launch.json in general, I'll explain the properties used and why is it relevant for Electron app.

  • name - Your name by which you'll identify configuration in VS
  • type - Configuration type - for Electron, it's node
  • request - Defines whether application will be launched (launch), or if it will be attached to another process (attach)
  • sourceMaps - Whether you want to use sourceMaps
  • outDir - Optional directory where generated code is expected (null means same as source)
  • program - Your app entry point - same as main in package.json (needs to be explicit, setting "." won't do)
  • stopOnEntry - When you launch the app, it will hit breakpoint immediately before your app is up and running
  • args - Array of arguments to pass to program (we're passing it in runtimeArgs, but we can pass it here as well)
  • cwd - Path to the program being debugged (in our case, that's root where program file is)
  • runtimeExecutable - Path to electron executable (I don't like having global installation of Electron, so I keep it for each project separately as node module)
  • runtimeArgs - Array of arguments that we'll pass to Electron (in this case, we are using package.json to define starting point and re-routing logging to console)
  • env - Collection of environment variables
  • externalConsole - We're setting this to false to show logs in VS
  • port - Port that we're attaching to (should be the same as the one that you ran your app with)

You can read a bit more about debugging options here.

When you're done defining your configurations, you can run it by going to Debug panel, choosing configuration and clicking play button or by pressing F5 key.

If you chose to run your app from i.e. Terminal, be sure to run it on the same port as you are listening in your attach configuration, in this example, it would be:

node_modules/.bin/electron . --debug-brk=5858  

This will start you app, but will wait until you attach to your app on that port. If you don't want to wait, but run you app immediately, use --debug instead of --debug-brk. By attaching to application you can debug it, but can't re-route logging to VS.

Important thing to note is that you can only actually debug your main process. Which is quite sad since most of the development will be done in Browser windows which are render processes.

I would love to hear how are you using VS for development!

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.

Comments