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

Question

设置角度 + 电子调试配置，它正在缓慢但肯定地粉碎我的灵魂。出于某种原因，渲染过程中没有击中断点（VSCode 显示错误Breakpoint ignored because generated code not found (source map problem?)"）。

我的调试配置看起来像这样（完整的回购在这里）：

// .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 调试器似乎也正确连接（可以在调试控制台中看到输出），但遗憾的是断点没有命中。

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

这甚至可以做到吗？

Answer 1

（对于最终到达这里的任何人）您需要：

1. 在tsconfig.json上启用源映射：

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

2. 在启动配置中添加源映射位置，例如：

"outFiles": [ "${workspaceRoot}/node_modules/**/*.js" ]

（来自 https://github.com/Microsoft/vscode-node-debug/issues/82#issuecomment-290642560）