Electron 调试与测试
Electron 中的调试与测试
Electron 应用调试和测试结合了 Web 开发工具（Chrome DevTools）和 Node.js 调试技巧。合理的调试流程和测试策略能显著提升开发效率和应用稳定性。
1.调试工具与技巧
| 调试对象 | 工具与方法 | 操作方式与技巧 |
|---|---|---|
| 渲染进程（Renderer） | Chrome DevTools | - 启动应用时添加--inspect或直接在BrowserWindow中openDevTools()- Elements：检查 DOM/CSS - Console：日志输出 - Sources：设置断点、调试 JS - Network：查看请求 - Performance：剖析渲染性能 |
| 主进程（Main） | Node.js Inspector + Chrome DevTools | - 启动时electron --inspect=9229 your-app.js（默认端口 9229）- Chrome 打开 chrome://inspect，点击 “inspect” 进入主进程调试- 支持断点、变量监视、栈追踪 |
| 主进程（高级） | VS Code Debugger | - 配置.vscode/launch.json：```json:disable-run |
| 预加载脚本（Preload） | 同渲染进程 DevTools | - 注意上下文隔离下变量作用域 - 使用 contextBridge暴露的 API 可在 Console 测试 |
| 双进程同时调试 | –inspect + Renderer DevTools | - 主进程用--inspect-brk暂停启动（便于早期断点）- 渲染进程正常打开 DevTools |
| 远程调试 | –remote-debugging-port | -electron --remote-debugging-port=9222 .- 其他设备 Chrome 访问 http://主机IP:9222 |
| 日志记录 | electron-log / console.log | - 生产环境禁用过多 console，改用日志文件 - electron-log支持文件旋转、级别控制 |
- 实用技巧：
- 使用
debug()库（DEBUG=app:* electron .）控制模块日志。 - 主进程错误捕获：
process.on('uncaughtException')和window.on('unresponsive')。 - 打包后调试：使用
electron-debug库自动开启 DevTools 和快捷键。
- 使用
2.测试策略
Electron 测试分为单元测试、集成测试和端到端（E2E）测试。
| 测试类型 | 推荐工具 | 适用场景与示例 |
|---|---|---|
| 单元测试 | Jest / Vitest / Mocha | 测试纯 JS 逻辑、工具函数、主进程模块 - Jest 配置简单，支持快照 - 示例： npm test -- --grep "main process" |
| 渲染进程组件测试 | React Testing Library / Vue Test Utils / Jest | 测试 UI 组件行为（不依赖 Electron 环境） - 模拟 contextBridge API |
| 集成测试 | Spectron（已弃用） → Playwright / Electron-Monaco | 测试 IPC、窗口行为、文件操作 - Playwright 支持 Electron（实验性） |
| 端到端测试（E2E） | Playwright / Cypress (with limitations) | 最推荐：Playwright - 官方支持 Electron（2024 年起稳定） - 示例配置： js<br>const { _electron: electron } = require('playwright');<br>const app = await electron.launch({ args: ['.'] });<br>const page = await app.firstWindow();<br>await page.screenshot({ path: 'test.png' });<br> |
| 替代方案 | WebdriverIO / TestCafe | 也可控制 Electron，但 Playwright 更现代、速度更快 |
| 打包后测试 | electron-builder + CI | 在 GitHub Actions 中构建并运行 E2E 测试，确保跨平台一致性 |
- Playwright 示例（测试主窗口标题）：
const{test,expect}=require('@playwright/test');const{_electron}=require('playwright');test('window title',async()=>{constelectronApp=await_electron.launch({args:['.']});constwindow=awaitelectronApp.firstWindow();awaitexpect(window).toHaveTitle('My App');awaitelectronApp.close();});
3.最佳实践
- 分层测试：单元测试覆盖率 >80%，E2E 测试关键用户流程。
- CI/CD 集成：GitHub Actions 中运行 headless 测试（Linux/macOS/Windows）。
- Mock IPC：测试渲染进程时 mock
window.electronAPI。 - 避免测试环境污染：清理 userData 目录、临时文件。
- 调试 + 测试结合：Playwright 支持
debug: true模式，暂停并打开 DevTools。 - 性能回归测试：结合 Lighthouse CI 或自定义启动时间测量。
熟练使用 DevTools + VS Code 调试主进程 + Playwright E2E 测试，是当前（2025 年）Electron 开发最高效的调试与测试组合。如果你的项目使用特定框架（如 React/Vue/Angular）或有特殊测试需求，可以提供更多信息，我可以给出更针对性的配置示例！