如何配置Rider同时调试.NET与Angular项目？

1. 确保Angular项目启用源映射 #

• 打开Angular项目根目录下的tsconfig.json，确认compilerOptions中"sourceMap": true（默认开发环境已开启，若未设置则手动添加）。
• 检查angular.json的projects.[你的项目名].architect.build.configurations.development下，"sourceMap": true是否生效。

2. 配置Rider调试会话 #

方式一：修改现有.NET调试配置 #

1. 打开运行/调试配置（右上角运行按钮旁的下拉菜单 → 编辑配置）。
2. 选中你的.NET Web应用配置（如截图中的WebApplication1），切换到启动前标签页。
3. 点击添加 → 启动npm脚本，选择Angular项目中的start脚本（用于启动Angular开发服务器）。
4. 调整启动顺序，确保npm脚本优先启动（或勾选并行运行让.NET与Angular服务同时启动）。

方式二：创建复合调试配置 #

1. 在运行/调试配置窗口中，点击添加 → 复合，命名为Full Stack Debug（自定义名称）。
2. 点击添加配置，分别加入你的.NET Web应用配置和Angular调试配置：
   • 若没有Angular调试配置，点击添加 → JavaScript调试，目标URL设为Angular开发服务器地址（通常是http://localhost:4200）。
3. 勾选并行运行选项，启动复合配置时会同时触发.NET和Angular的调试会话。

3. 验证断点触发 #

• 启动调试会话后，先触发.NET代码断点（比如发起API请求），确认正常命中。
• 操作Angular前端触发TypeScript逻辑（如点击交互按钮），检查TS断点是否命中。若未命中：
  • 确认浏览器与Rider调试器已建立连接（查看Rider调试工具窗口的浏览器会话）。
  • 在调试工具窗口的脚本标签中，确认对应的TypeScript源文件已被加载。

内容的提问来源于stack exchange，提问作者Valentin Vadász