如何在WebStorm中配置调试electron程序

在 WebStorm 中设置 Npm 运行配置和 Attach to Node.js/Chrome 运行配置，具体步骤如下：

一、创建 Npm 运行配置（主进程调试）

1. 打开 WebStorm，进入你的项目。

2. 在顶部菜单中选择 Run -> Edit Configurations...。

3. 在打开的窗口中，点击左上角的 + 按钮，选择 Npm。

4. 在右侧配置区域中，设置以下选项：

   • Name: 你可以为这个配置命名，例如 "Main Process Debug"。
   • Command: 选择 run。
   • Scripts: 选择 dev（确保你的 package.json 中有一个名为 dev 的脚本）。
   • Arguments: 填入 -- --sourcemap --remote-debugging-port=9222。

5. 点击 OK 保存配置。

二、创建 Attach to Node.js/Chrome 运行配置（渲染进程调试）

1. 在同一个 Edit Configurations... 窗口中，再次点击 + 按钮，选择 Attach to Node.js/Chrome。

2. 设置以下选项：

   • Name: 命名为 "Render Process Debug"。
   • Host: 输入 localhost。
   • Port: 输入 9222。

3. 点击 OK 保存配置。

三、在调试模式下运行配置

1. 在 WebStorm 的顶部工具栏中，选择你刚刚创建的 "Main Process Debug" 配置。
2. 点击旁边的调试按钮（类似一个虫子的小图标）来启动调试模式。
3. 运行之后，再选择你创建的 "Render Process Debug" 配置。
4. 再次点击调试按钮进行附加到渲染进程的调试。

这样，你就能够分别调试 Electron 应用的主进程和渲染进程了。