在WebStorm里调试Electron forge里的typescript代码的解决方案

在创建了Electron forge项目后，启动Electron App,只能在Window的调试窗口Window窗口里引入的js,而无法调试nodejs相关的js和ts文件，这个确实挺麻烦的。

我常在WebStorm里编写前端相关项目。经过一番研究后，解决了无法在WebStorm里对electron froge+vite+typescrpt这个组合创建的项目进行调试的问题。

配置 launch.json：在 WebStorm 中，需要配置调试配置文件 launch.json。通常，这个文件位于 .idea/runConfigurations/ 目录下。如果不存在，可以手动创建。配置文件内容如下：

{
  "name": "Electron: Main",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/electron-forge/dist/electron-forge-start",
  "args": ["."],
  "windows": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
  },
  "osx": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"
  },
  "linux": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"
  },
  "protocol": "inspector",
  "runtimeArgs": [
    "--remote-debugging-port=9222"
  ],
  "port": 9222,
  "console": "integratedTerminal",
  "outputCapture": "std"
}

配置调试器：在 WebStorm 中，打开调试配置（Run -> Edit Configurations…），然后点击加号（+），选择 Node.js。设置如下参数：

• Name: 任意命名，例如 Electron: Main
• Node interpreter: 选择你安装的 Node.js 版本路径
• Working directory: 选择你的项目根目录
• JavaScript file: 选择 node_modules/electron-forge/dist/electron-forge-start
• Application parameters: 输入 . 表示当前目录
• Application parameters: 输入 . 表示当前目录
• JavaScript file: 选择 node_modules/electron-forge/dist/electron-forge-start里

这个时候就可以按IDE右上角的调试按钮，启动Electron应用了，但是还无法调试ts文件。

在vite.main.config.ts 里配置source map文件的生成位置

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    sourcemap: true, // 启用 source maps
    outDir: './.vite/build' // 指定输出目录
  }
});

如果build节点里没有sourcemap:true 和outDir的话可以自己配置一下。

启动调试

在ts脚本里打一个断点，再试试是否可以断点了。一般来说，项目没有特别修改过其他地方的设置，这个时候就可以正常断点调试了。