WebStorm支持Electron开发但需手动配置：因不继承shell环境变量，需显式设置electron路径、正确配置主进程调试入口、启用source map并按主进程→preload→渲染进程顺序逐项验证。
WebStorm 能完整支持 Electron 开发与调试，但默认配置下主进程断点不生效、electron 命令找不到、渲染进程白屏等问题高频出现——根本原因不是 WebStorm 不支持，而是它不自动继承 shell 环境变量，且对 Electron 特殊启动方式缺乏开箱即用的适配。
Electron 命令在 WebStorm Terminal 里报 command not found
这是 macOS/Linux 用户最常卡住的第一步：终端里 electron --version 正常，但 WebStorm 的 Terminal 或运行配置里提示 command not found: electron。
- 根本原因是 WebStorm 默认不读取
~/.zshrc或~/.bash_profile中的PATH，尤其当你用nvm管理 Node 版本时更明显 - Windows 用户需确认安装 Node.js 时勾选了
Add to PATH；若用nvm-windows，建议从命令行启动 WebStorm（如start "WebStorm"） - 最稳妥方案：在项目根目录执行
npm install electron --save-dev，然后在 WebStorm 运行配置中把Node interpreter显式设为node_modules/.bin/electron（注意路径要写全，不能只写electron）
主进程断点不触发，debugger 无响应
WebStorm 默认按普通 Node.js 脚本调试，但 Electron 主进程实际由 electron 可执行文件加载 main.js，直接运行 main.js 会跳过整个 Electron 初始化流程。
- 新建一个
Node.js运行配置，JavaScript file不填main.js，而是填本地electron可执行路径，例如：node_modules/electron/dist/electron（macOS/Linux）或node_modules/electron/dist/electron.exe（Windows） -
Application parameters填.（当前目录），确保 Electron 加载的是本项目，而不是全局 demo - 若用
electron-vite，优先使用其内置脚本：node_modules/electron-vite/bin/electron-vite.js作为JavaScript file，参数填dev - 想从第一行就中断？启动时加
--inspect-brk=5858，再用 WebStorm 的Attach to Node.js/Chrome配置连到localhost:5858
渲染进程白屏或 preload.js 不生效
白屏常见于 win.loadFile('index.html') 在开发时路径解析失败，或预加载脚本因 contextIsolation 默认开启而被隔离。
- 主进程加载 HTML 时，改用
win.loadURL('file://' + path.join(__dirname, 'index.html'))，避免loadFile()对相对路径的隐式处理差异 - 检查
webPreferences配置：必须显式设置nodeIntegration: true和contextIsolation: false（仅开发期），否则require、process等 Node API 不可用，preload.js也拿不到全局对象 - 右键
index.html→Open in Browser是无效的——这只会用 Chrome 直接打开 HTML，不经过 Electron 启动流程，preload.js、IPC、Node 模块全部失效
调试时源码映射错乱或断点偏移
Electron + TypeScript/Vite/Webpack 组合下，source map 未正确生成或未被 WebStorm 识别，会导致断点打在错误行、变量值显示 undefined。
- 确保构建工具输出 source map：Vite 项目检查
vite.config.ts中build.sourcemap为true；Webpack 检查devtool设为'source-map'或'inline-source-map' - WebStorm 中右键项目根目录 →
Load Project from External Model→ 选Webpack或Vite，让它自动读取构建配置并关联 source map - 若用
@别名，需在 WebStorm 的Settings → Languages & Frameworks → JavaScript → Webpack中指定webpack.config.js路径，否则 Ctrl+Click 跳转会失败
Electron 调试真正的复杂点不在配置本身，而在于它横跨三个执行上下文：主进程（Node.js）、预加载脚本（Node + DOM 有限访问）、渲染进程（Chromium + 可选 Node 集成）。每个上下文的调试入口、环境变量、source map 路径都得单独对齐，漏掉任意一环，断点就静默失效。别指望一次配完，建议按主进程 → preload → 渲染进程的顺序逐个验证。
