如何在Visual Studio Code中调试Electron与Angular应用并命中断点？

嘿，我太懂这种感受了——好不容易跟着教程搭好Angular+Electron的项目，折腾半天终于启动成功，结果VSCode里的TypeScript断点死活打不中，简直让人头大！我之前也踩过这个坑，给你几个针对性的解决办法，应该能帮你搞定：

你贴的配置片段不完整，针对Angular+Electron的场景，需要同时配置主进程（Node.js环境）和渲染进程（Chrome浏览器环境）的调试。这里给你一个经过验证的完整配置，记得根据你的项目结构调整路径：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/your-app-name/main.js", // 替换成你编译后的主进程入口文件路径
      "args": ["."],
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "timeout": 30000
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

• 主进程配置：重点确认program指向你编译后的Electron主入口（如果主进程用TypeScript编写，要确保已经编译成JS文件，且outFiles覆盖到输出目录）
• 渲染进程配置：Angular的渲染进程本质是Chrome环境，所以用chrome类型调试器，通过9222端口附加
• 复合配置：选择Electron: All可以一键启动两个进程的调试，不用手动操作两次

调试TypeScript的核心是Source Map文件，你得确保Angular编译时正确生成了它：

• 打开angular.json，找到你的项目配置，确认architect.build.options.sourceMap设为true，并且sourceMap.scripts也开启（这是TypeScript代码调试的关键）
• 编译项目时用ng build --configuration development，确保dist目录里生成了对应的.map文件

要让VSCode能附加到渲染进程，必须让Electron启动时打开调试端口。你可以在package.json的scripts里修改启动命令：

"scripts": {
  "electron:serve": "ng build --watch & electron . --remote-debugging-port=9222"
}

这样启动Electron时会自动开启9222端口，方便调试器连接。

• 先运行ng build --watch，让Angular持续编译并更新代码和Source Map
• 然后在VSCode的调试面板里选择Electron: All，点击启动按钮
• 现在试试触发你设置断点的代码，应该就能命中了！

• 检查tsconfig.json，确保sourceMap设为true，outDir指向正确的编译输出目录
• 确认断点打在实际会执行的代码上，别打在未被调用的函数或者组件初始化前的代码里
• 如果主进程用TypeScript编写，确保主进程的代码也生成了Source Map（比如用ts-node或者Electron打包工具的TS支持）

内容的提问来源于stack exchange，提问作者mu88