electron调试需主、渲染进程分别配置:主进程用node类型launch,渲染进程用pwa-chrome类型attach,启动顺序不可颠倒,且必须匹配node.js v18.15.0–v20.14.0、electron≥38.1.2及正确的sourcemappathoverrides。

Electron 开发不需要专用 IDE,但 VSCode 必须手动配对才能真正可用——缺任意一环,debugger 不生效、main.js 断点全灰、openDevTools() 报错或白屏都是常态。
Node.js 版本必须卡在 v18.15.0–v20.14.0 区间
Electron ≥38.1.2 虽宣称支持 Node.js v20,但实测 v20.14.0 是当前最稳的上限;v22+ 直接报 ERR_MODULE_NOT_FOUND 或 Cannot find module 'electron'。v16 及更早版本则会触发 DEP0148 弃用警告并导致 IPC 失效。
- 用
nvm切换:运行nvm install 20.14.0 && nvm use 20.14.0 - 验证:终端执行
node -v和npm -v,确保 npm ≥9.5.0 - 项目内必须本地安装 Electron:
npm install electron --save-dev,禁用全局安装(npm install -g electron会导致require('electron')找不到模块)
launch.json 必须拆成两个独立配置:主进程 + 渲染进程
VSCode 不支持单条配置同时 attach 两个进程。主进程用 node 类型调试,渲染进程必须走 pwa-chrome 类型,且二者启动顺序不能颠倒——先启主进程,等窗口出现后再开 DevTools。
- 主进程配置关键项:
"type": "node","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"(Windows 加.cmd后缀),"args": ["."] - 渲染进程配置关键项:
"type": "pwa-chrome","request": "attach","port": 9222,并确保主进程中调用win.webContents.openDevTools({ mode: 'detach' })在'ready-to-show'之后 - 漏掉
"autoAttachChildProcesses": true会导致子窗口、BrowserWindow新建实例无法被断点捕获
ESLint 规则必须区分主/渲染进程环境
主进程是纯 Node.js 环境,不能用 document、window;渲染进程默认有 DOM,但若启用 contextIsolation: true(推荐),则无法直接访问 require 或 process。ESLint 若不区分,会批量报错或漏报安全风险。
- 在
.eslintrc.cjs中为不同文件设置env:env: { node: true }用于main.js、preload.js;env: { browser: true, es2021: true }用于renderer.js或 Vue/React 组件 - 禁用
no-undef对ipcRenderer的误报:在渲染进程配置中加globals: { ipcRenderer: 'readonly' } - Preload 脚本需显式声明
contextIsolation兼容性:const { contextBridge, ipcRenderer } = require('electron')必须包裹在if (contextIsolation)分支内
Electron Reload 插件不能替代手动进程控制
electron-reload 在开发期能监听文件变化并重启整个应用,但它会杀死主进程再拉起新实例,导致调试会话中断、断点失效、console.log 输出丢失。真实开发中应优先用 concurrently 启动双进程,并配合 VSCode 的多配置 launch。
- 在
package.json中写:"dev": "concurrently \"npm:electron\" \"npm:watch\"",其中electron脚本为electron . --inspect=9229 - 避免在
main.js开头就调用openDevTools(),否则窗口未 ready 就弹窗,可能报Cannot read property 'openDevTools' of null - 热重载真正可靠的路径是:改完 renderer 代码 → 保存 →
Ctrl+R刷新当前窗口(非重启整个 Electron 进程)
Electron 调试不是“配好就能跑”,而是每一步都得对齐进程模型、V8 协议版本、Chromium 构建参数。最容易被忽略的是 sourceMapPathOverrides 配置缺失——当使用 Vite 或 Webpack 打包渲染进程时,断点打在源码上却停在 bundle 里,就是这个字段没映射对。











