VSCode调试Electron必须分主、渲染进程两套独立配置:主进程用node类型launch模式,--inspect=9229须在args中位于"."之前,runtimeExecutable指向本地electron二进制;渲染进程用pwa-chrome类型attach模式,需openDevTools()置于'ready-to-show'后并配webRoot或http服务地址。

VSCode 本身不运行 Electron,它只负责编辑、启动调试器和调用系统已安装的 Node.js 和 Electron —— 所以“配置 Electron 的 Node 环境”,本质是确保 VSCode 能正确找到并使用你本地装好的 Node.js 运行时,再让 Electron 在该环境下加载主进程和渲染进程。
node -v 能跑,但 VSCode 启动 Electron 报错 “command not found: electron”
这不是 Electron 没装,而是 VSCode 的集成终端没继承 shell 的完整 PATH,尤其常见于 macOS/Linux 使用 zsh + nvm 或 Homebrew 安装 Electron 的场景。
- 先确认 Electron 全局可执行:
which electron(macOS/Linux)或where electron(Windows),如果返回空,说明没装或没进 PATH - macOS/Linux:检查
~/.zshrc是否有export PATH="$(npm config get prefix)/bin:$PATH"(nvm 默认不自动加 global bin) - Windows:全局安装后,
electron -v在 CMD/PowerShell 能运行,但 VSCode 终端仍报错?关掉所有 VSCode 窗口,**从终端启动**:code --no-sandbox,避免继承旧环境 - 不想全局装?直接用项目内
./node_modules/.bin/electron,launch.json 中设"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"
launch.json 配置主进程调试时 program 字段总出错
Electron 主进程入口(如 main.js)必须是 CommonJS 格式(require)、且不能是 TypeScript 源码或 ESM 文件;VSCode 调试器不会自动编译或转译。
-
"program"必须填绝对路径或相对于${workspaceFolder}的真实 JS 文件,例如:"${workspaceFolder}/main.js" - 如果用了 TypeScript 编译到
dist/main.js,就填"${workspaceFolder}/dist/main.js",同时确保tsconfig.json开启"sourceMap": true - ESM 项目(
type: "module")不能直接用program启动 —— Electron v20+ 支持 ESM 主进程,但需显式加参数:"runtimeArgs": ["--loader", "ts-node/esm"](配合 ts-node)或改用node启动再 attach - 别写成
"${file}"—— 当前打开的是renderer.js或preload.js时会直接失败
断点打在 preload.js 或 renderer 进程里不生效
VSCode 默认只调试主进程;preload 和 renderer 是 Chromium 渲染进程,需单独启用 DevTools 或用 chrome://inspect,或通过 webPreferences.devTools: true 手动打开。
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
- preload.js 断点:在
webPreferences中启用nodeIntegration: true(不推荐)或更安全的contextIsolation: false+nodeIntegration: true(仅开发期),然后用 Chrome DevTools 的localhost:9222连接 - 更推荐方式:在
main.js中加mainWindow.webContents.openDevTools(),运行后按F12切换到 Sources 标签页,找到webpack://或file://下的preload.js打断点 - VSCode 官方插件 Debugger for Edge / Debugger for Chrome 可 attach 到 renderer 进程,但需配合
launch.json中"request": "attach"和 Electron 启动时加--remote-debugging-port=9222 - 注意:
preload.js若用了 ESM 语法(import),而 Electron 版本
code-runner 插件运行 Electron 项目直接卡死或报错
code-runner 是为单文件脚本设计的,它把 main.js 当普通 Node 脚本执行,完全绕过 Electron runtime,所以必崩。
- 删掉
code-runner.executorMap里对javascript的 Electron 相关覆盖 —— 它根本不适配多进程架构 - 想一键启动?用
tasks.json定义任务:"command": "npx", "args": ["electron", "."],再绑定快捷键 - 更稳妥:在
package.json里写"scripts": {"dev": "electron ."},VSCode 的“运行和调试”视图中选npm: dev启动项,它会自动注入调试上下文 - 切记:不要用 code-runner 跑任何含
app.on('ready', ...)或BrowserWindow的代码 —— 它没 Electron 环境,require('electron')会直接Cannot find module
Electron 的 Node 环境不是“配出来”的,而是靠 VSCode 正确复用你系统已有的 Node 和 Electron 实例;最容易被忽略的点是:主进程调试必须用真实 JS 文件、renderer 进程调试得靠 Chromium DevTools、而所有跨进程通信(如 contextBridge)的断点都只能在对应进程上下文中生效 —— 没有“一键全链路调试”这种捷径。










