Question

是否可以使用Visual Studio Code Debugger调试已使用npm link链接的Angular库？特别是，我想知道是否可以将调试器链接到库的TypeScript代码（而不是内置的js代码）。

我的调试器对于我在VS Code中运行的应用程序运行良好，但是从未遇到链接库断点。

从我所做的研究中，我相信我理解为什么会发生这种情况（使用该库的应用程序没有源，它仅在node_modules中包含已编译的代码），但是我无法弄清楚或找到有关如何进行操作的任何详细信息调试。

以下是我所做工作的概述：

Angular 7库内置在dist文件夹中。
我在dist文件夹中运行了npm link
我在应用程序中运行了npm link @my/test-lib，该库显示在node_modules中，应用程序可以正常使用它
在angular.json中：sourceMap为true，preserveSystemlinks为true，aot为false，vendorSourceMap为true
tsconfig.json sourceMap为true，enableResourceInlining为true
vscode launch.json将runtimeArgs设置为--preserve-symlinks和--preserve-symlinks-main

Answer 1

我发布的只是为@SyncingDisks解决方案提供一个更清晰的示例：

您实际上不需要完整的路径，$ {workspaceFolder}也可以完成此工作：

"webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"

可以与launch.json匹配，如下所示：

 {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
            "webpack:///ng://angular-reporting/lib/*": "${workspaceFolder}/projects/angular-reporting/src/lib/*"
        },
}

别忘了将--vendorSourceMap添加到ng服务中，这将成为：

ng serve --vendorSourceMap

更新：

对于Angular 7及更高版本，请更新“ angular.json”文件，而不是在“ ng serve”中添加“ --vendorSourceMap”：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "sourceMap": {
          "scripts": true,
          "styles": true,
          "vendor": true
        },
        ...
     }
}

Answer 2

根据sourceMapPathOverrides微调您的launch.json。我的摘录：

"sourceMapPathOverrides": {
     "webpack:///ng://<<your-awesome-lib>>/lib/*": "C:/<<full path to your library wrapper app>>/projects/<<your-awesome-lib>>/src/lib/*"
 },

如何在Visual Code中调试Angular 7库

2 个答案: