Electron + React Debug in VSCode

Previous post has Build a React based Electron app

Now I will setup Visual Studio Code for debugging electron app.

In addition about Electron Process Model you can read.

After read Electron Debugging the Main Process, I need add --inspect=[port] or --inspect-brk=[port] for running electron. Electron will listen for V8 inspector protocol messages on the specified port. (default port is 5858)

Add --remote-debugging-port=9223 for debug in browser.

The vscode-js-debug is bundle in vscode since 1.46, We don't need to install Debugger for Chrome any more.

vscode-js-debug
Debugger for Chrome - Deprecated

Use vscode open project folder.

Open package.json, Add scripts package.json

{
  "scripts": {
    ...
    "start-main-debug": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3003 && electron . --inspect=5858  --remote-debugging-port=9223\""
    ...
  },
}

Next, add run configuration.

In vscode main menu Run / Add Configuration..., select Node.js.

It will create default ./vscode/launch.json file. ./vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/public/electron.js"
        }
    ]
}

Replace with:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main Process",
            "type": "node",
            "request": "launch",
            "protocol": "inspector",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "start-main-debug"
            ],
            "env": {
                "PORT": "3003"
            }
        },
        {
            "name": "Electron: Renderer Process",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 30000
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main Process",
                "Electron: Renderer Process"
            ]
        }
    ]
}

set some break points on electron.js or React application files.

Switch to Run and Debug, It at the left side bar. Select Electron: All configuration to debugging project.

it should be fine to debug in VSCode.

Sample

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main Process",
            "type": "node",
            "request": "launch",
            "protocol": "inspector",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "start-main-debug"
            ],
            "env": {
                "PORT": "3003"
            }
        },
        {
            "name": "Electron: Renderer Process",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 30000
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main Process",
                "Electron: Renderer Process"
            ]
        }
    ]
}

package.json

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "description": "Electron app sample",
  "author": "Alger Chen <alger.chen23@gmail.com>",
  "build": {
    "appId": "electron.sample.tw"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "start": "concurrently \"cross-env PORT=3003 BROWSER=none yarn react-start\" \"wait-on http://localhost:3003 && electron .\"",
    "start-main-debug": "concurrently \"cross-env PORT=3003 BROWSER=none yarn react-start\" \"wait-on http://localhost:3003 && electron . --inspect=5858 --remote-debugging-port=9223\""
  },
  ...
  "devDependencies": {
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "electron": "^14.0.1",
    "electron-builder": "^22.11.7",
    "electron-is-dev": "^2.0.0",
    "wait-on": "^6.0.0"
  }
}

Electron + React Debug in Visual Studio Code

Sample

References