WebStorm调试Electron需正确配置环境与运行方式：macOS/Linux启用shell integration，Windows确保PATH或用nvm启动；主进程须以electron可执行文件启动并传入项目路径，而非直接运行main.js；渲染进程加载HTML应使用loadURL+绝对路径；类型提示需启用@ts-check、标记资源根、配置tsconfig.json的types和lib。

WebStorm 找不到 electron 命令

终端里能执行 electron --version，但 WebStorm 的 Terminal 或运行配置报 command not found: electron，这不是 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，然后在运行配置中把 Node interpreter 指向 node_modules/.bin/electron（Windows 是 node_modules\.bin\electron.cmd）

主进程断点不触发，main.js 直接运行无效

新建一个 Node.js 运行配置、填 main.js，断点永远不生效——因为 Electron 主进程不是靠执行 JS 文件启动的，而是由 electron 可执行文件加载整个项目目录。

WebStorm Linux版

WebStorm 2026.2 Linux tar.gz 安装包，适合在 Linux 桌面环境中搭建现代前端开发与调试工作流。

下载

• 新建 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 端口

渲染进程白屏或报 Failed to load resource

用 win.loadFile('index.html') 在开发时极易白屏，不是代码错，是路径解析逻辑和打包后不一致。

• 改用 win.loadURL('file://' + path.join(__dirname, 'index.html'))，显式拼出绝对路径
• 别在 WebStorm 里右键 index.html → Open in Browser，那只是普通浏览器打开，不经过 Electron 加载流程
• 加一行 console.log(path.join(__dirname, 'index.html')) 验证输出路径是否真实存在

类型提示失效，app、BrowserWindow 标红或无补全

即使装了 @types/electron，app 和 BrowserWindow 仍没提示，甚至 require 报红，问题出在 WebStorm 对资源根和类型声明的识别上。

• 在 main.js 顶部加 // @ts-check
• 右键项目根目录 → Mark Directory as → Resources Root
• 检查 tsconfig.json 中是否包含 "types": ["electron"] 和 "lib": ["es2020", "dom"]

Electron 主进程调试依赖可执行文件而非 JS 入口，这个前提一旦忽略，所有断点、日志、调试器连接都会失效。很多人卡在“为什么 main.js 里写了 debugger 却不暂停”，其实根本没进主进程上下文——得让 WebStorm 启动的是 electron，而不是 node main.js。