electron 配置调试任务时踩的连环坑

在 vscode 中，可以通过launch.json配置调试任务。 以一个 typescript+electron 项目的launch.json作为示例（vscode 1.61.2）：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron Main",
      "type": "node",
      "request": "launch",
      //不要配置此项！ "program": "${workspaceFolder}/...", //此项会导致electron的app.getAppPath()出问题!
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "args": [
        "--remote-debugging-port=9222",//显式指定调试端口，用于`Electron Renderer`的`port`
        "${workspaceFolder}"//此项没配置会导致最终启动的是electron自带的默认示例
      ],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "skipFiles": [
        "<node_internals>/**" // 这里并不清楚实际效果，但看到的示例里有，那就留着没动了。想具体了解可以去看vsc官网
      ],
      "protocol": "inspector", // 旧版vscode的配置项。推测依据：高版本的vscode（如1.61.2）自带了debugger，而我看的博客提到需要自己安装`debugger from chrome`的插件。应该是新版本的默认配置变更了
      "sourceMaps": true, // 设为true，以便直接在源文件（xx.ts，或者webpack之类的工具打包、压缩前的源文件）打断点。当然，这需要输出给electron运行的js文件中包含source-map
    },
    {
      "name": "Electron Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"//映射渲染端的根路径
    }
  ],
  "compounds": [
    {
      "name": "All",
      "configurations": [
        "Electron Main",
        "Electron Renderer",
      ]
    }
  ]
}
 
 

在 vscode 的官方文档中可以找到更详细的说明，比如对preLaunchTask的使用说明（可以用来在启动调试任务前自动编译）。

下面直接开始正题！

坑点

1. json 文件中已经在注释里提到的：
   对于program项，如果手动进行配置（在 json 文件中显式指定），则会导致调试任务运行的 electron 中，app.getAppPath 这一 API 返回的地址与直接启动 electron（如使用框架的electron-forge start）得到的地址不同！
   如：program配置为${workspaceFolder}/build/main/main.js，调试任务运行的 electron 其 getAppPath 得到的是root/build/main。
   而electron-forge start直接运行得到的是root。
   另外：不配置program时，vscode 会根据 package.json 查找启动入口，需要将 package 的 main 配置好。
2. 如 json 文件中所配置的，Electron Renderer对渲染端的调试是需要通过远程连接的方式进行的。而如果 electron 通过new BrowserWindow()新建窗口后，直接加载了有效页面，将导致渲染端的调试任务 “无法对一些远程 连接建立前就执行 的代码打断点”。
   解决办法也很简单：等待一小会再调用BrowserWindow.loadFile加载 html。大概 2 秒就好（可能视机器配置不同，调试任务建立连接所需要的时间有一定的浮动）。
   建议（通过打包工具的插件）在项目中支持条件编译功能，便于开发模式下自动加上延迟加载的代码，生产模式下自动移除。

另外一个踩过的坑

1. 在 electron 中不要使用 process.cwd 这类接口获取工作路径，打包后很可能会导向错误的位置（xxx.exe 所在的文件夹）。