Debug Electron in VS Code
2 min read

Debug Electron in VS Code

Debug Electron in VS Code

TL;DR: You need to follow the server (electron) client (VS code debugger) approach. Be aware of OS specifics!

So far, my approach towards development/debugging would be to write some code, test it, rewrite, test... all with a bunch of console.log() statements. That's not efficient at all and since VS code has debugging capabilities, I've decided to find out how.

First, when you enter the debug mode, you're presented with a default configuration containing of two parts:

  1. A launch part - designed to launch your application
  2. An attach part - designed to attach the debugger to the launched process


I'll start with the attach segment because it's the simplest one:

  "name": "Attach",
  "type": "node",
  "request": "attach",
  "port": 5858,
  "sourceMaps": false,
  "outDir": null

It defines a listener on a port (5858 in this example) where the debugger lies.


The launcher configuration is bit more convoluted:

  "name": "Launch - electron",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/src/electron/index.js",
  "stopOnEntry": false,
  "args": [],
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
  "runtimeArgs": ["./src/electron", " --debug-brk=5858", " --enable-logging"],
  "env": {},
  "externalConsole": false,
  "sourceMaps": false,
  "outDir": null

This segment practically says:

  • The program to be debugged is ${workspaceRoot}/src/electron/index.js (or whatever your electron main script is called)
  • Debug of type node
  • The runtimeExecutable is ${workspaceRoot}/node_modules/.bin/electron (the electron binary, not your node one)
  • The runtimeArgs are the one described above. The most important one is debug-brk which launches the debugger on the specified port

As a side note, --enable-logging allows us to print out console.log() statements :)

How To

Once you have the configuration set up, you need to execute the Launch - electron:


and then the Attach configuration:


You'll get something like:


MS Windows Notes

On MS Windows, I get an error like:

Chrome error: Error: spawn c:\DevNoBackup\myapp/node_modules/.bin/electron ENOENT

You'll need to specify the extension:

"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",

in order to work. This is quite unpleasant and it makes the feature platform-dependent.

My solution was to specify the command in package.json:

"scripts": {
  "launch:e:dev": "cross-env NODE_ENV=development HOT=1 electron ./src/electron --debug-brk=5858",

This is also useful when you need to add in specific modules (like babel-register).