VS Code + Chrome 调试 + nrwl 架构

Question

您是否能够在 chrome 中调试使用 nx.dev 开发的应用程序？

看起来当你选择 NX 时你失去了调试能力。生成的 .map.js 文件包含源文件的相对路径，但缺少文件所在的两个初始目录，因此安装在 vs-code 中的 chrome 的调试器无法绑定断点。

感谢您的帮助！

Answer 1

对我有用的是，您需要在 angular.json 中将项目的 "root" 属性设置为空字符串。

 "catalog": {
      "projectType": "application",
      "schematics": {
        "@nrwl/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "apps/catalog/catalog/src",

但请注意，这可能会破坏其他功能

Answer 2

实际上设置 root 有一个缺点："",

nx dep-graph 变得混乱并显示对错误应用程序的依赖关系。
nx g move --project folder/ 感到困惑，并说一个或多个项目具有相同的根目录。

我推断这不是解决此问题的最佳方法。

VS Code + Chrome 调试 + nrwl 架构

VS Code + Chrome debug + nrwl architecture

google-chrome

debugging

visual-studio-code

nrwl

nrwl-nx