Electron 开发工具

Electron 开发工具推荐使用 VS Code，如果你还不熟悉 VS Code 可以参考我们的 VS Code 教程。

VS Code 下载地址：https://code.visualstudio.com/。

VS Code 本身就是用 Electron 构建的，因此它对 Electron 开发有天然的支持优势：

  • 内置终端集成
  • 强大的调试功能
  • 丰富的插件生态
  • Git 集成
  • IntelliSense 智能提示
  • 完全免费且开源

VS Code 必装插件推荐

插件名称 作用说明
Electron Snippets 提供 Electron API 的代码片段和自动补全
Prettier – Code Formatter 统一代码风格，自动格式化
ESLint 检查语法错误和风格问题
Debugger for Chrome 让你在 VS Code 里调试前端渲染进程
Node.js Modules Intellisense 自动提示 Node.js 模块函数
Path Intellisense 文件路径智能提示
npm Intellisense 自动提示 npm 包名
Auto Rename Tag / Auto Close Tag HTML 标签智能补全
GitLens 提升 Git 代码版本可视化体验

Chrome DevTools 调试（渲染进程）

Electron 的渲染进程其实就是一个 Chromium 浏览器页面，
所以你可以像调网页一样，用 Chrome DevTools 直接调试。

启用 DevTools

在 main.js 中创建窗口时添加：

实例

const win = new BrowserWindow({
  width: 800,
  height: 600
});
win.loadFile('index.html');

// 打开开发者工具
win.webContents.openDevTools();

可以调试的内容

  • HTML / CSS / JS 代码
  • 网络请求（Network）
  • 控制台日志（Console）
  • DOM 结构
  • 性能分析（Performance）
  • 内存泄漏（Memory）

提示

渲染进程调试几乎与 Chrome 一致，因此：

  • 你可以使用 console.log() 输出调试信息
  • 也能直接使用 Chrome 的快捷键（Cmd + Option + I / Ctrl + Shift + I）打开 DevTools

Electron 主进程调试技巧

主进程不是网页，而是 Node.js 环境，调试方式与网页不同。

方法 1：使用 VS Code 内置调试器

在项目根目录创建 .vscode/launch.json 文件。

内容如下（可直接用）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron 主进程调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/electron/dist/electron.js",
      "args": ["."],
      "outputCapture": "std",
      "runtimeExecutable": null,
      "cwd": "${workspaceFolder}"
    }
  ]
}

然后在 main.js 中设置断点，点击调试 ▶️ 即可。

方法 2：命令行远程调试

启动时加上参数：

electron . --inspect=5858

然后在 Chrome 地址栏打开：

chrome://inspect

即可远程连接主进程，像调 Node.js 一样断点调试。

常见调试技巧汇总

调试目标 工具/方法 说明
窗口界面卡顿 Chrome DevTools → Performance 分析渲染耗时、JS 执行瓶颈
窗口闪退 在主进程加 try/catch 或使用 electron-log 日志记录 捕获主进程异常
IPC 通信异常 在 ipcMain / ipcRenderer 中加日志 调试主从通信
文件路径错误 使用 path.join(__dirname, 'xxx') 避免相对路径问题
打包调试 使用 electron-builder --dir 先构建目录模式 可直接运行调试

进阶工具推荐

工具 用途
Electron Forge 官方推荐的脚手架工具，快速创建、打包项目
Electron Builder 功能强大的打包与发布工具
Electron Reload 文件修改后自动刷新应用
Spectron 用于自动化测试 Electron 应用
Devtron Electron 官方调试扩展，分析应用内部状态
React / Vue DevTools 如果用前端框架，调试组件状态非常方便

用 VS Code 写，用 DevTools 看，用 launch.json 调，用 Builder 打包 —— 这就是一个专业 Electron 开发者的完整工具链。