React应用调试时显示main.chunk.js而非源文件的解决求助

1. 修正launch.json的源映射路径配置 #

你之前的sourceMapPathOverrides匹配规则不符合create-react-app生成的源映射路径格式，调整后的完整launch配置如下：

{
  "type": "msedge",
  "request": "launch",
  "name": "Launch Edge against localhost",
  "url": "https://localhost:3000/",
  "webRoot": "${workspaceFolder}",
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${workspaceFolder}/src/*",
    "webpack:///src/*": "${workspaceFolder}/src/*"
  },
  "smartStep": true,
  "skipFiles": ["<node_internals>/**", "webpack/**"]
}

• 新增的两条映射规则，覆盖了create-react-app初始编译和热更新时的源文件路径格式，确保调试器能正确关联本地代码
• smartStep让调试器自动跳过webpack编译生成的无关代码，直接定位到你的源文件
• skipFiles忽略Node内部和webpack相关文件，避免调试时误入无关逻辑

2. 临时禁用快速刷新（仅作排查用） #

如果上述配置仍未解决问题，可以临时关闭create-react-app的快速刷新功能：
在项目根目录新建.env文件，添加以下内容：

FAST_REFRESH=false

重启npm start后，热更新会回退到整页刷新模式，此时调试器应该能正常识别源文件。但此方法会降低开发效率，仅作为临时排查手段。

3. 检查VS Code调试插件版本 #

确保你的VS Code安装了最新版的JavaScript Debugger插件，旧版本可能存在热更新源映射的兼容性问题。

问题根源说明 #

create-react-app的Fast Refresh热更新机制会生成hot-update.js及对应的源映射文件，这些文件的路径格式和初始编译的main.chunk.js存在差异。之前的映射规则未覆盖热更新文件的路径格式，导致调试器无法将更新后的代码关联到本地源文件，修正路径匹配规则即可解决该问题。

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