YouTip

Electron applications involve **main process and renderer process** as two runtime environments, so debugging and testing strategies need to be designed for different processes. A good debugging and testing workflow can improve development efficiency and application stability. * * * ## Debugging the Main Process ### Debugging with Chrome DevTools * The Electron main process can be started with `--inspect` or `--inspect-brk` and debugged using Chrome DevTools. * Startup example: electron --inspect=9222 . * Enter `chrome://inspect` in the Chrome address bar to connect to the main process for breakpoint debugging, viewing the call stack, and executing expressions. ### Breakpoint Debugging in VS Code * Configure `launch.json` in VS Code: { "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 * Use `console.log` or third-party logging libraries (like `winston`) to record main process runtime information. * It is recommended to categorize logs: info, warn, error, for easier troubleshooting. * * * ## Debugging the Renderer Process ### Opening Developer Tools * Call in the renderer process: mainWindow.webContents.openDevTools() * You can directly view the DOM, debug JS, and access network requests and performance panels. ### Remote Debugging * The renderer process can also open a remote debugging port: electron --remote-debugging-port=9223 . * You can connect for 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(`Installed: ${name}`)) .catch(err => console.log('Installation failed:', err))}) * You can debug component states, 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. * It can test application startup, window behavior, button clicks, and IPC calls. npm install --save-dev spectron mocha chai * Example: const Application = require('spectron').Applicationconst assert = require('chai').assertconst path = require('path') describe('Application startup test', function () { this.timeout(10000) let app before(async () => { app = new Application({ path: require('electron'), // Electron executable args: [path.join(__dirname, '..')] }) await app.start() }) after(async () => { if (app && app.isRunning()) await app.stop() }) it('Window count should be 1', async () => { const count = await app.client.getWindowCount() assert.equal(count, 1) })}) ### Unit Testing * Unit tests can be written 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 clicking buttons, opening new windows, and whether data interaction is normal. * 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 * Execute unit tests and end-to-end tests * Generate coverage reports and upload them * * * ## Summary Core points of Electron debugging and testing: * **Main Process**: Chrome DevTools or VS Code breakpoint debugging + logging * **Renderer Process**: Developer Tools + frontend framework DevTools * **Automated Testing**: Spectron, unit testing, end-to-end testing + CI/CD * **Goal**: Improve development efficiency, discover potential issues, and ensure application stability