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 里，就是这个字段没映射对。
