Electron双进程调试必须分主进程与渲染进程独立配置:主进程用node类型+runtimeExecutable指向本地electron二进制+args["."],渲染进程依赖webContents.openDevTools()并配合chrome://inspect手动连接,二者协议不同、不可混用。

Electron双进程调试不能靠一个配置打天下,主进程和渲染进程必须分开配、分开调,否则断点根本不会停。
主进程调试:launch.json 里必须用 node 类型 + runtimeExecutable
VS Code 默认的 Node 调试器不认 Electron 主进程,得手动指定执行入口。常见错误是直接用 program 指向 main.js,结果启动失败或断点失效。
-
type必须设为"node"(不是"electron"或"pwa-node") -
runtimeExecutable要指向本地安装的 Electron 可执行文件:"${workspaceFolder}/node_modules/.bin/electron"(Windows 下用.cmd后缀) -
args里传"."表示当前目录为 Electron 应用根路径,别漏掉 - 如果项目用 TypeScript,
sourceMaps必须设为true,且tsconfig.json中"sourceMap": true也要开启
典型配置片段:
{
"name": "Electron: Main",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"args": ["."],
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/dist-electron/**/*.js"]
}渲染进程调试:靠 webContents.openDevTools() + Chrome chrome://inspect
VS Code 本身不直接调试渲染进程 JS,得走 Chromium 的 DevTools 协议。硬配 launch.json 试图“调试 renderer”基本会失败。
- 在主进程创建
BrowserWindow后,立刻调用mainWindow.webContents.openDevTools({ mode: 'right' }) - 启动时加
--inspect=9229参数(如npm start -- --inspect=9229),然后访问chrome://inspect连接目标 - 不要依赖
Debugger for Chrome插件自动发现——Electron 渲染进程常不在默认扫描列表里,得手动Configure添加localhost:9229 - 若用 Vite 开发服务器(如 electron-vite-react),确保
vite.config.ts中server.hmr.overlay未禁用,否则热更新报错不显示
ESLint + Prettier 冲突必须关掉重复规则
ESLint 报 prettier/prettier 错误,或者保存后格式乱套,八成是规则打架了。Prettier 不是 ESLint 插件,它只管格式;ESLint 的 rules 里若还留着缩进、引号、分号等检查,必然冲突。
- 装
eslint-config-prettier,并在.eslintrc.js的extends末尾加上它 - 删掉所有和格式相关的 ESLint 规则,比如
indent、quotes、semi -
.prettierrc里明确写"semi": false,对应 ESLint 就不能留"semi": ["error", "always"] - VS Code 设置里打开
editor.formatOnSave,但关掉editor.codeActionsOnSave里的source.fixAll.eslint,避免保存时两次格式化
jsconfig.json 别漏配 paths 别名,否则 Path Intellisense 不工作
写了 @/components/Button 却没有路径提示?不是插件坏了,是 VS Code 根本不知道 @ 指哪。TypeScript 项目用 tsconfig.json,JS 项目就得靠 jsconfig.json 告诉编辑器别名映射。
- 必须放在项目根目录,不能放在
src或electron子目录下 -
baseUrl设为".",paths用数组(不是单个字符串):"@/*": ["src/*"] - 改完要重启 VS Code 窗口,仅重载窗口不够,IntelliSense 缓存不会自动刷新
- 如果用了 Vite,还要在
vite.config.ts的resolve.alias里同步配一遍,否则运行时报Cannot find module
真正卡住人的从来不是某个插件装没装,而是主进程和渲染进程的调试通道压根没打通,或者源码映射(source map)在某一层被悄悄关掉了——这两处一错,断点就永远停在 bundle 里,而不是你写的 TS 文件上。


















