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

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

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

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

   

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

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

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

5. 点击 OK 保存配置

   

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

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

   

2. 设置以下选项:

   Name: 命名为 electron debug Host: 输入 localhost Port: 输入 9222

3. 点击 OK 保存配置

在调试模式下运行配置

1. 在 WebStorm 的顶部工具栏中，选择你刚刚创建的 electron:serve 配置

2. 以调试模式启动 electron:serve 配置

   

3. 运行之后，再选择你创建的 electron debug 配置

4. 再次点击调试按钮进行附加到 electron:serve 的进程上并选择需要调试的页面

   

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