使用 VSCode Chrome 调试器调试 Electron 渲染过程答案

【问题标题】：Debugging Electron render process with VSCode Chrome debugger使用 VSCode Chrome 调试器调试 Electron 渲染过程
【发布时间】：2020-07-13 15:32:55
【问题描述】：

设置一个 Angular + 电子调试配置，它缓慢但肯定地压垮了我的灵魂。由于某种原因，在渲染过程中没有遇到断点（VSCode 显示错误Breakpoint ignored because generated code not found (source map problem?)"）。

我的调试配置看起来像这样（完整的 repo 是 here）：

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron: Main",
      "protocol": "inspector",
      // Prelaunch task compiles main.ts for Electron & starts Angular dev server.
      "preLaunchTask": "Build: All",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9223", "--serve", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 30000,
      "urlFilter": "http://localhost:4200/*",
      // Source map overrides are copied from Angular CLI debugging recipe.
      // See: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      // The main process should be started before renderer to prevent timeout.
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build: All",
      "type": "shell",
      "command": "npm run electron:serve-tsc && ng serve",
      "isBackground": true,
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^.*",
          "endsPattern": "^.*Compiled successfully.*"
        }
      }
    }
  ]
}

我可以用上面的配置很好地调试主进程，太棒了。 chrome 调试器似乎也正确附加（可以在调试控制台中看到输出），但遗憾的是断点没有命中。

只需在 Angular 代码中添加 debugger; 语句，我就可以在 Electron 窗口的 chrome devtools 中进行调试，但在 VSCode 中进行调试会好得多。

这有可能吗？？

【问题讨论】：

标签： angular debugging visual-studio-code electron vscode-debugger

【解决方案1】：

（对于任何在这里结束的人）您需要：

在您的 tsconfig.json 上启用源地图：

{
  "compilerOptions": {
    "sourceMap": true,
    ...
  }
}

在您的启动配置中添加源地图位置，例如：

"outFiles": [ "${workspaceRoot}/node_modules/**/*.js" ]
（从 https://github.com/Microsoft/vscode-node-debug/issues/82#issuecomment-290642560)

【讨论】：