时间戳

首页 > 解决方案 > 使用 VSCode Chrome 调试器调试 Electron 渲染过程

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

问题描述

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

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

// .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 中进行调试会好得多。

这甚至可能吗？

标签： angulardebuggingvisual-studio-codeelectronvscode-debugger

解决方案

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

  1. 在tsconfig.json上启用源映射：
{
  "compilerOptions": {
    "sourceMap": true,
    ...
  }
}
  1. 在您的启动配置上添加源地图位置，例如：
"outFiles": [ "${workspaceRoot}/node_modules/**/*.js" ]

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

推荐阅读