Electron 应用涉及主进程与渲染进程两个运行环境因此调试和测试策略需要针对不同进程设计。良好的调试与测试流程可以提升开发效率和应用稳定性。调试主进程使用 Chrome DevTools 调试Electron 主进程可以通过--inspect或--inspect-brk启动用 Chrome DevTools 调试。启动示例electron --inspect9222 .在 Chrome 地址栏输入chrome://inspect即可连接到主进程进行断点调试、查看调用栈、执行表达式。VS Code 断点调试在 VS Code 中配置launch.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 }这样可以在主进程文件中直接设置断点调试逻辑和 IPC 通信。日志记录使用console.log或第三方日志库如winston记录主进程运行信息。建议日志分类info、warn、error方便定位问题。调试渲染进程打开开发者工具在渲染进程中调用mainWindow.webContents.openDevTools()可直接查看 DOM、JS 调试、网络请求和性能面板。远程调试渲染进程也可开启远程调试端口electron --remote-debugging-port9223 .可在 Chrome DevTools 连接远程调试适合多窗口或跨设备调试。React / Vue DevTools对于使用前端框架的渲染进程安装对应 DevToolsnpm install --save-dev electron-devtools-installer示例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)) })可调试组件状态、Props、事件提升前端开发效率。自动化测试Spectron 测试框架Spectron 是 Electron 官方推荐的端到端测试工具基于 WebDriver。可测试应用启动、窗口行为、按钮点击、IPC 调用。npm install --save-dev spectron mocha chai示例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) }) })单元测试可针对主进程逻辑、渲染进程模块编写单元测试。推荐使用 Jest 或 Mocha Chainpm install --save-dev jest端到端测试测试用户操作流程如点击按钮、打开新窗口、数据交互是否正常。可结合 Spectron 或 Playwright Electron。CI/CD 集成在持续集成平台GitHub Actions、GitLab CI中配置 Electron 测试安装 Node.js Electron执行单元测试和端到端测试生成覆盖率报告并上传小结Electron 调试与测试核心要点主进程Chrome DevTools 或 VS Code 断点调试 日志渲染进程开发者工具 前端框架 DevTools自动化测试Spectron、单元测试、端到端测试 CI/CD目标提高开发效率发现潜在问题保证应用稳定性
Electron 应用涉及主进程与渲染进程两个运行环境因此调试和测试策略需要针对不同进程设计。良好的调试与测试流程可以提升开发效率和应用稳定性。调试主进程使用 Chrome DevTools 调试Electron 主进程可以通过--inspect或--inspect-brk启动用 Chrome DevTools 调试。启动示例electron --inspect9222 .在 Chrome 地址栏输入chrome://inspect即可连接到主进程进行断点调试、查看调用栈、执行表达式。VS Code 断点调试在 VS Code 中配置launch.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 }这样可以在主进程文件中直接设置断点调试逻辑和 IPC 通信。日志记录使用console.log或第三方日志库如winston记录主进程运行信息。建议日志分类info、warn、error方便定位问题。调试渲染进程打开开发者工具在渲染进程中调用mainWindow.webContents.openDevTools()可直接查看 DOM、JS 调试、网络请求和性能面板。远程调试渲染进程也可开启远程调试端口electron --remote-debugging-port9223 .可在 Chrome DevTools 连接远程调试适合多窗口或跨设备调试。React / Vue DevTools对于使用前端框架的渲染进程安装对应 DevToolsnpm install --save-dev electron-devtools-installer示例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)) })可调试组件状态、Props、事件提升前端开发效率。自动化测试Spectron 测试框架Spectron 是 Electron 官方推荐的端到端测试工具基于 WebDriver。可测试应用启动、窗口行为、按钮点击、IPC 调用。npm install --save-dev spectron mocha chai示例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) }) })单元测试可针对主进程逻辑、渲染进程模块编写单元测试。推荐使用 Jest 或 Mocha Chainpm install --save-dev jest端到端测试测试用户操作流程如点击按钮、打开新窗口、数据交互是否正常。可结合 Spectron 或 Playwright Electron。CI/CD 集成在持续集成平台GitHub Actions、GitLab CI中配置 Electron 测试安装 Node.js Electron执行单元测试和端到端测试生成覆盖率报告并上传小结Electron 调试与测试核心要点主进程Chrome DevTools 或 VS Code 断点调试 日志渲染进程开发者工具 前端框架 DevTools自动化测试Spectron、单元测试、端到端测试 CI/CD目标提高开发效率发现潜在问题保证应用稳定性
