Electron Forge 调试主进程时启用源映射的配置方法

在使用 Electron Forge 开发 Electron 应用时，开发者经常会遇到需要调试主进程代码的情况。本文将详细介绍如何正确配置源映射(sourcemap)以便在 Chrome 开发者工具中调试 TypeScript 编写的 Electron 主进程代码。

问题背景

当使用 Electron Forge 的 Vite + TypeScript 模板创建项目时，默认情况下启动调试会话后，开发者工具中显示的代码是经过编译后的 JavaScript 代码，而不是原始的 TypeScript 代码。这使得调试过程变得困难，因为开发者无法直接看到和操作自己编写的源代码。

解决方案

要解决这个问题，需要在 Vite 的配置文件中显式启用源映射生成。具体步骤如下：

1. 打开项目中的 vite.main.config.mjs 文件
2. 在构建配置中添加 rollup 输出选项，明确启用源映射

配置修改如下：

defineConfig({
  build: {
    rollupOptions: {
      output: {
        sourcemap: true,  // 启用源映射生成
      },
    },
  },
});

工作原理

这个配置修改的作用是：

1. 告诉 Vite 在构建过程中生成源映射文件(.map 文件)
2. 这些源映射文件包含了编译后代码与原始 TypeScript 代码之间的对应关系
3. Chrome 开发者工具能够读取这些映射信息，从而在调试时显示原始代码而非编译后的代码

调试步骤

配置完成后，可以按照以下步骤进行调试：

1. 在 package.json 中添加调试脚本：

"scripts": {
  "dev:main": "electron-forge start -- --inspect-brk"
}

2. 运行调试命令：

npm run dev:main

3. 打开 Chrome 浏览器，访问 chrome://inspect
4. 在 Remote Target 下找到你的 Electron 应用，点击 "inspect"

现在，开发者工具中显示的将是原始的 TypeScript 代码，你可以设置断点、查看变量值等，就像调试普通网页应用一样方便。

最佳实践建议

1. 在开发环境中始终启用源映射，以便快速定位和解决问题
2. 生产环境中应禁用源映射，以避免暴露源代码和减小应用体积
3. 考虑使用环境变量来动态控制源映射的生成

defineConfig({
  build: {
    rollupOptions: {
      output: {
        sourcemap: process.env.NODE_ENV === 'development',
      },
    },
  },
});

通过以上配置，开发者可以充分利用 Electron Forge 和 Vite 的强大功能，同时保持高效的调试体验。