WebStorm 调试 Electron 需主渲染进程分离配置：macOS/Linux 启用 shell integration，Windows 用终端启动或配 node_modules/.bin/electron；主进程需指向 electron 可执行文件并设 Application parameters 为.；渲染进程用 loadURL 拼绝对路径；类型提示需 @ts-check、Mark as Resources Root 及正确 tsconfig。
WebStorm 调试 Electron 不是“配个 Node.js 运行配置就能跑”，主进程和渲染进程必须分开对待，且默认配置几乎全部失效。
WebStorm 找不到 electron 命令
终端里能执行 electron --version，但 WebStorm 的 Terminal 或运行配置报 command not found: electron，根本原因不是环境没装好，而是 WebStorm 默认不加载 shell 配置（比如 macOS 的 ~/.zshrc）。
- macOS/Linux：进
Preferences → Tools → Terminal，勾选Activate shell integration - Windows：确认安装 Node.js 时勾选了
Add to PATH；若用nvm，必须先在终端里启动 WebStorm（如open -a "WebStorm.app"） - 更稳的方案：项目内执行
npm install electron --save-dev，然后在 WebStorm 运行配置中把Node interpreter指向node_modules/.bin/electron（注意路径要写全，Windows 是node_modules\.bin\electron.cmd）
主进程断点不触发
直接新建一个 Node.js 运行配置、填 main.js，断点永远不生效——因为 Electron 主进程不是靠执行 JS 文件启动的，而是由 electron 可执行文件加载整个项目目录。
- 新建 Node.js 运行配置，
JavaScript file不填main.js，而是填你本地的electron可执行路径（如node_modules/electron/dist/electron或全局路径） -
Application parameters填.（当前目录），确保它加载的是本项目 - 如果用了
electron-vite或electron-builder，优先用它们的开发命令（如npm run dev），再用 WebStorm 的Attach to Node.js/Chrome连接9229端口
渲染进程白屏或找不到 index.html
用 win.loadFile('index.html') 在开发时极易白屏，不是代码错，是路径解析逻辑和打包后不一致。
- 改用
win.loadURL('file://' + path.join(__dirname, 'index.html'))，显式拼出绝对路径 - 别在 WebStorm 里右键
index.html → Open in Browser，那只是普通浏览器打开，不经过 Electron 加载流程 - 检查
path.join(__dirname, 'index.html')输出的实际路径是否真实存在（加一行console.log验证）
类型提示失效或 require 报红
即使装了 @types/electron，app、BrowserWindow 还是没提示，甚至 require 标红，问题出在 WebStorm 对资源根和类型声明的识别上。
- 在项目根目录加
// @ts-check注释，启用 TypeScript 类型检查（即使不用 TS） - 右键
resources或src目录 →Mark Directory as → Resources Root - 确保
tsconfig.json中有"types": ["electron"]和"lib": ["es2020", "dom"]
Electron 调试真正的复杂点不在工具链本身，而在于它横跨 Node.js 和 Chromium 两套运行时——主进程断点生效了，不代表渲染进程能连上；渲染进程连上了，也不代表 preload 脚本能被正确注入。每层加载路径、每个 file:// 协议的拼接、每次 __dirname 的实际指向，都得亲手验证一次。
