VSCode调试Electron需区分主进程与渲染进程：主进程用node类型launch配置调试，渲染进程通过Chromium DevTools的Sources面板调试，需启用devTools和source-map。
在 VSCode 中调试 Electron 应用并不复杂，关键是正确区分主进程和渲染进程，并为两者分别配置调试环境。Electron 启动后会运行两个独立的 Node.js 环境（主进程 + 渲染器），VSCode 默认只能附加其中一个，所以需要组合使用 launch 和 attach 模式。
配置 launch.json 启动主进程
主进程是 Electron 的入口（通常是 main.js 或 main.ts），它控制窗口、菜单、生命周期等。你需要让 VSCode 以调试模式启动 Electron，而不是直接运行。
- 确保已全局或本地安装
electron（推荐本地：npm install --save-dev electron） - 在项目根目录创建
.vscode/launch.json，添加以下配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/electron/dist/electron.exe"
},
"args": ["."],
"outputCapture": "std",
"console": "integratedTerminal",
"sourceMaps": true,
"protocol": "inspector",
"env": {
"ELECTRON_ENABLE_LOGGING": "true",
"ELECTRON_ENABLE_STACK_DUMPING": "true"
}
}
]
}
注意：runtimeExecutable 路径需匹配你的系统（Windows 下优先用 .exe 路径）；args: ["."] 表示从当前目录启动主进程文件（即 package.json 中的 "main" 字段所指文件）。
附加调试渲染进程（DevTools 方式）
渲染进程本质是 Chromium 页面，不能直接用 Node 调试器 attach。最稳定的方式是：启动应用后，在渲染页中打开 DevTools → 切换到 “Sources” 面板 → 在左侧文件树中找到你的 JS/TS 文件（通常位于 webpack:// 或 app:// 协议下）→ 打断点调试。
基于 Internet 的 Web 技术，完全采用B/S 体系结构的网络办公系统。该系统具有安全性高、功能极为强大、可在广域网中使用也可在局域网中使用、也可以同时在局域网和广域网中使用的特点，全傻瓜式安装，无需作复杂配置，界面采用类似windows资源管理器的设计，结构清晰，条理分明，即使不熟悉电脑的人也可很快掌握全部操作。该系统通过在广域网内的广泛试用验证和经专业技术人员的调试、测试，确认具有很
- 确保主进程创建窗口时启用了
webPreferences.devTools: true（开发时建议设为true） - 如果用了 Webpack/Vite，记得在构建配置中开启
devtool: 'source-map'并输出.map文件 - VSCode 的 “JavaScript Debug Terminal” 或 “Debugger for Chrome” 扩展已不推荐——Electron 内置 Chromium 版本与 Chrome 扩展常不兼容
一键调试主+渲染（推荐进阶方案）
想在 VSCode 里统一管理两个进程？可以借助 electron-forge 或 electron-vite 脚手架，它们自带调试配置。若手动配置，可追加一个 attach 配置用于渲染进程源码映射（需配合 Browser Preview 或自建 chrome-debug）：
- 先运行主进程调试配置（F5）
- 等窗口弹出、DevTools 打开后，复制地址栏 URL（如
http://localhost:3000或file:///...） - 在
launch.json新增一个chrome类型的attach配置（需装官方 “Debugger for Edge” 或 “JavaScript Debugger” 扩展） - 但更轻量的做法是：直接在渲染进程代码中加
debugger;，再用 DevTools 的 Sources 面板单步跟进
常见问题快速排查
调试失败大多源于路径、协议或 sourcemap 错误：
-
断点不命中？ 检查是否加载了正确的
.map文件（DevTools → Sources → 右键文件 → “Reveal in sidebar” → 查看底部是否有 map 提示） -
报错 “Cannot find module”？ 确保
runtimeExecutable指向的是你项目安装的 Electron，不是全局版本 -
主进程 console.log 不显示？ 开启
ELECTRON_ENABLE_LOGGING环境变量，或改用console.error()（部分日志被静默） -
TS 源码无法调试？ 确保
tsconfig.json中"sourceMap": true且编译输出包含.js.map文件
基本上就这些。主进程用 Node 调试器，渲染进程靠 Chromium DevTools，二者配合好，Electron 调试就很顺了。
