VSCode配置Electron桌面应用调试主进程与渲染进程【指南】-VSCode-PHP中文网

vscode调试electron必须拆为主、渲染进程两套独立配置：主进程用node类型attach模式，--inspect=9229须在args中位于"."之前，runtimeexecutable指向本地electron二进制；渲染进程用pwa-chrome类型attach，需opendevtools()置于'ready-to-show'后并配webroot或http服务地址。

vscode配置electron桌面应用调试主进程与渲染进程【指南】

VSCode 调试 Electron 必须拆成主进程和渲染进程两套独立配置，缺一不可——只配一个，断点必然失效；顺序错乱，DevTools 打不开或白屏。

主进程断点不生效？检查 `--inspect` 参数位置和 `runtimeExecutable`

Electron 12+ 默认忽略调试协议，electron . 启动时不会暴露 V8 inspector 接口。VSCode 的 node 类型调试器无法自动 attach，必须显式注入参数。

args 数组中 "--inspect=9229" 必须在 "." 之前，写成 [".", "--inspect=9229"] 会被 Electron 完全忽略
runtimeExecutable 必须指向项目本地的 Electron 二进制："${workspaceFolder}/node_modules/.bin/electron"（macOS/Linux）或 "${workspaceFolder}/node_modules/.bin/electron.cmd"（Windows），不能用全局 electron 命令
加 "env": { "ELECTRON_ENABLE_LOGGING": "true" }，终端能立刻看到窗口创建、IPC 注册等关键日志，比盲等断点快得多
若用 TypeScript 或打包工具（如 electron-vite），需确认 sourceMaps 为 true，且 outFiles 指向生成路径（如 "${workspaceFolder}/dist/main.js"）

渲染进程 DevTools 打不开或断点无效？别信 `file://` 自动映射

渲染进程本质是 Chromium 页面，VSCode 必须通过 Chrome Debug Protocol 连接，type 必须是 pwa-chrome（不是 chrome 或 node），且不能依赖 file:// 协议自动解析源码路径。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

代码里必须调用 win.webContents.openDevTools({ mode: 'detach' })，且放在 'ready-to-show' 事件之后，避免窗口未就绪时触发报错
launch.json 中 url 字段推荐用 http://localhost:3000（对应 vite dev server），而非 file://；若坚持用 file://，必须配 webRoot: "${workspaceFolder}/src"，否则断点找不到源文件
确保没加 --disable-features=OutOfBlinkCors 等调试干扰 flag，这类参数会让 DevTools 加载失败或网络面板空白
React/Vue 组件调试需额外安装对应 DevTools：用 electron-devtools-installer，且 installExtension 必须在 app.whenReady() 之后调用

双进程一起调试？两个 `launch.json` 配置 + 手动节奏控制

VSCode 不支持单条配置同时 attach 主进程和渲染进程。强行合并会导致端口冲突、子窗口无断点、或调试器反复重连。

主进程配置用 type: "node"，request: "attach"，port: 9229；渲染进程配置用 type: "pwa-chrome"，request: "attach"，port: 9222
推荐启动顺序：先运行主进程 debug（F5），等控制台输出 “App ready” 或窗口弹出后，再运行渲染进程 debug
两个配置的 name 要区分清楚，比如 "Debug Main Process" 和 "Debug Renderer Process"
主进程配置里加 "console": "integratedTerminal"，方便观察日志触发时机

Node.js 和 Electron 版本不匹配？直接导致断点灰、IPC 失效

当前最稳组合是 Node.js v20.14.0 + Electron ≥38.1.2。v22+ 会直接触发 ERR_MODULE_NOT_FOUND；v16 或更早则报 DEP0148 警告并让 IPC 失效。

用 nvm install 20.14.0 && nvm use 20.14.0 切换版本，再执行 node -v 和 npm -v 验证（npm ≥9.5.0）
项目内必须 npm install electron --save-dev，禁用 npm install -g electron —— 全局安装会导致 require('electron') 找不到模块
ESLint 必须按进程环境区分规则：main.js 和 preload.js 设 env: { node: true }；renderer.js 或组件文件设 env: { browser: true, es2021: true }
Preload 脚本中必须用 const { contextBridge, ipcRenderer } = require('electron')，并显式声明 ipcRenderer 全局变量，加 globals: { ipcRenderer: 'readonly' } 消除 no-undef 误报