Отладка электронного рендеринга с помощью отладчика VSCode Chrome - PullRequest
Новая
       75

Отладка электронного рендеринга с помощью отладчика VSCode Chrome

3 голосов
/ 01 апреля 2020

Настройка конфигурации angular + электронная отладка, и это медленно, но верно сокрушает мою душу. По какой-то причине точки останова не достигают в процессе рендеринга (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 позволяет мне отладка в devtools chrome в окне Electron, но было бы намного лучше отладить в VSCode.

Возможно ли это сделать ??

...