玩命狂奔的间隙,莫忘记抬头看看前路的星光

0%

在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/ 目录下。如果不存在,可以手动创建。配置文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"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文件的生成位置

1
2
3
4
5
6
7
8
import { defineConfig } from 'vite';

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

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

启动调试

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