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 () => {
const electronApp = await _electron.launch({ args: ['.'] });
const window = await electronApp.firstWindow();
await expect(window).toHaveTitle('My App');
await electronApp.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）或有特殊测试需求，可以提供更多信息，我可以给出更针对性的配置示例！
“`
