在创建了Electron forge项目后,启动Electron App,只能在Window的调试窗口Window窗口里引入的js,而无法调试nodejs相关的js和ts文件,这个确实挺麻烦的。
我常在WebStorm里编写前端相关项目。经过一番研究后,解决了无法在WebStorm里对electron froge+vite+typescrpt这个组合创建的项目进行调试的问题。
配置 launch.json:在 WebStorm 中,需要配置调试配置文件 launch.json。通常,这个文件位于 .idea/runConfigurations/ 目录下。如果不存在,可以手动创建。配置文件内容如下:
1 | { |
配置调试器:在 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 | import { defineConfig } from 'vite'; |
如果build节点里没有sourcemap:true 和outDir的话可以自己配置一下。
启动调试
在ts脚本里打一个断点,再试试是否可以断点了。一般来说,项目没有特别修改过其他地方的设置,这个时候就可以正常断点调试了。