Electron Debugging and Testing

Electron applications involveMain process and renderer processtwo runtime environments, so debugging and testing strategies need to be designed for different processes.
Good debugging and testing processes can improve development efficiency and application stability.

Debugging the main process

Debugging with Chrome DevTools

The Electron main process can be accessed through--inspector--inspect-brkLaunch and debug with Chrome DevTools.
Launch example:
```
electron --inspect=9222 .
```
Enter in the Chrome address barchrome://inspect, which connects to the main process for breakpoint debugging, viewing call stacks, and executing expressions.

VS Code breakpoint debugging

Configure in VS Codelaunch.json：

{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "program": "${workspaceFolder}/node_modules/electron/cli.js",
  "args": ["."],
  "runtimeExecutable": null,
  "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" },
  "sourceMaps": true,
  "protocol": "inspector"
}

This allows you to set breakpoints directly in the main process files, debugging logic and IPC communication.

Logging

Usageconsole.logor third-party logging libraries (e.g.winstonRecord main process running information.
Recommended log categories: info, warn, error, for convenient issue troubleshooting.

Debug the renderer process.

Open developer tools.

Call in the renderer process:
```
mainWindow.webContents.openDevTools()
```
You can directly view the DOM, JS debugging, network requests, and performance panels.

Remote Debugging

The renderer process can also enable a remote debugging port:
```
electron --remote-debugging-port=9223 .
```
You can connect to remote debugging in Chrome DevTools, suitable for multi-window or cross-device debugging.

React / Vue DevTools

For renderer processes using frontend frameworks, install the corresponding DevTools:
```
npm install --save-dev electron-devtools-installer
```

Example:

const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')

app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS)
    .then(name => console.log(`已安装: ${name}`))
    .catch(err => console.log('安装失败:', err))
})

You can debug component state, props, and events, improving frontend development efficiency.

Automated testing

Spectron testing framework

Spectron is the officially recommended end-to-end testing tool for Electron, based on WebDriver.
You can test application startup, window behavior, button clicks, and IPC calls.
```
npm install --save-dev spectron mocha chai
```

Example:

const Application = require('spectron').Application
const assert = require('chai').assert
const path = require('path')

describe('应用启动测试', function () {
  this.timeout(10000)
  let app

  before(async () => {
    app = new Application({
      path: require('electron'), // Electron 可执行文件
      args: [path.join(__dirname, '..')]
    })
    await app.start()
  })

  after(async () => { if (app && app.isRunning()) await app.stop() })

  it('窗口数量应为 1', async () => {
    const count = await app.client.getWindowCount()
    assert.equal(count, 1)
  })
})

Unit Testing

You can write unit tests for main process logic and renderer process modules.
It is recommended to use Jest or Mocha + Chai:npm install --save-dev jest

End-to-end testing

Test user operation flows, such as whether button clicks, opening new windows, and data interactions work correctly.
Can be combined with Spectron or Playwright + Electron.

CI/CD integration

Configure Electron testing in continuous integration platforms (GitHub Actions, GitLab CI):

Install Node.js + Electron
Run unit tests and end-to-end tests
Generate coverage reports and upload them

Summary

Electron debugging and testing core points:

main process: Chrome DevTools or VS Code breakpoint debugging + logs
Renderer process: Developer tools + frontend framework DevTools
Automated testing: Spectron, unit testing, end-to-end testing + CI/CD
Target: Improve development efficiency, discover potential issues, ensure application stability

other extensions