VS Code + Chrome 调试 + nrwl 架构

Posted 2023-03-23

【中文标题】VS Code + Chrome 调试 + nrwl 架构

【英文标题】：VS Code + Chrome debug + nrwl architecture

【发布时间】：2020-06-26 08:38:58

【问题描述】：

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

https://nx.dev/angular

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

感谢您的帮助！

【参考方案1】：

实际上设置 root:"",

有一个缺点

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

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

【讨论】：

我在 nx 工作区中有几个应用程序，每个都延迟加载库。我用这个来工作...... “type”：“chrome”，“request”：“launch”，“name”：“Designer”，“url”：“localhost:4204”，“webRoot”：“ $workspaceFolder/apps/designer", "sourceMapPathOverrides": "webpack:///./*": "$webRoot/*", "webpack:///src/*": "$webRoot /*", "webpack:///*": "", "webpack:///./~/": "$webRoot/node_modules/*", "meteor: //?app/*": "$webRoot/*" ,

您好阿兰，感谢您的意见。我同意缺点，因为它们也发生在我身上。希望这个主题应该在 NX 开发人员的关注范围内，并且他们会提出适当的解决方案。他们要么处理 launch.json 文件，要么修复 nx dev-graph 和 nx g move 的工作方式

@Alaind'Espaignet - 你描述的 launch.json 对我有用。感谢您找出 sourceMapPathOverrides！

这实际上不是问题的答案，它应该是对已接受答案的评论

【参考方案2】：

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

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

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

【讨论】：

感谢您的回复。是的，这就是我所做的，而且效果很好。感谢您的准确回复

很高兴我能提供帮助，但老实说，不知道删除根路径有什么缺点...如果你找到了，请告诉我！