JetBrains Rider中React TypeScript项目调试失效问题求助

以下是可直接落地的修复步骤：

1 调整webpack配置（非必须，优化调试体验） #

将webpack.config.js中的devtool配置改为开发环境专用的快速源映射格式，提升Rider识别效率：

// 替换原有devtool配置
devtool: process.env.NODE_ENV === "production" ? "source-map" : "eval-cheap-module-source-map"

同时关闭webpack devServer的自动打开浏览器配置，避免手动打开的窗口无法绑定调试器：

devServer: {
  // 其他配置不变
  open: false
}

2 新建正确的Rider运行配置 #

不要直接用调试模式启动npm的start命令，需要拆分两个独立配置：

2.1 开发服务器启动配置

保留你原有的npm类型运行配置，命令选start，工作目录选前端项目根目录（即SolutionName/ApplicationName/ClientApp），日常只需要普通模式运行这个配置即可，不要用调试模式启动。
等控制台输出服务启动完成，确认http://localhost:9000可以正常访问。

2.2 浏览器调试绑定配置

新建JavaScript Debug类型的运行配置：

• URL栏填写http://localhost:9000
• 工作目录同样选择前端项目根目录SolutionName/ApplicationName/ClientApp，不要选整个C#解决方案的根目录
• 保存配置

2.3 （可选）配置一键复合启动

新建Compound类型的运行配置，依次添加上面两个配置，设置先启动开发服务器，再启动调试配置，后续可以一键启动完整调试流程。

3 验证调试效果 #

普通模式启动开发服务器配置，等服务就绪后，用调试模式启动JavaScript Debug配置，Rider会自动打开绑定了调试器的Chrome窗口，此时在tsx/jsx文件中设置的断点即可正常命中，热重载功能也不会受影响。

内容的提问来源于stack exchange，提问作者Michael