VSCode调试React项目时断点不生效怎么办？

Prog.自雨提问于 2026-03-26 12:01:22 阅读 13

工具

我在VSCode里用Debugger for Chrome插件调试本地启动的React项目，但打的断点一直显示灰色，提示“未验证”，根本进不去。开发服务器是用npm start启的，也没改过webpack配置。

我试过加debugger语句能停住，但断点就是不行。是不是launch.json配错了？我的配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Debug配置 VSCode 开发工具

我来解答赞 1 收藏

反馈

1 条解答

Dev · 春芹 Lv1

你这问题前端这块挺常见的，多半是source map没配对。我建议你先检查下launch.json里的webRoot设置。

你的配置里把webRoot设成src目录了，但React项目通常build出来的东西在public或者dist目录。试试改成"${workspaceFolder}"，这样VSCode能找到源文件的映射关系。

另外别忘了在package.json的scripts里加个环境变量：

"start": "REACT_APP_DEBUG=true react-scripts start"

如果还不行，看看控制台有没有报source map相关的错误。有时候浏览器缓存也会捣乱，记得清下缓存。

最后提醒一下，如果你用了babel之类工具，确保.babelrc里有生成source map的配置。前端调试这种事情，细节很重要，搞不定就多试几次配置组合吧。

2026-03-26 12:02