VSCode调试React项目时断点不生效怎么办？
我在用VSCode调试本地的React项目，已经装了Debugger for Chrome插件，也配好了launch.json，但打的断点总是变成灰色，提示“未验证的断点”。试过重启编辑器、重新编译项目都不行。
我的launch.json配置是这样的：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}项目是用Create React App创建的，开发服务器正常运行在3000端口。是不是webRoot路径配错了？还是需要额外的sourceMap配置？
- 2
回答
33浏览
VSCode调试React项目时断点不生效怎么办？
我在VSCode里用Debugger for Chrome插件调试本地启动的React项目，但打的断点一直显示灰色，提示“未验证”，根本进不去。开发服务器是用npm start启的，也没改过webpa...
- 1
回答
351浏览
VSCode调试React项目时断点无法命中怎么办？
用React+Vite新建的项目，配置好VSCode调试后，代码里的断点就是没反应。已经检查过launch.json里路径没问题，但调试时控制台只显示"正在调试"，断点都是灰色的。 我的组件代码是这样...
- 2
回答
21浏览
VSCode Remote连接后React组件不热更新怎么办？
我在用 VSCode Remote-SSH 连接到远程服务器开发 React 项目，本地修改代码后页面完全不热更新，手动刷新也不生效，但终端里 Webpack 显示编译成功了。这是怎么回事？ 我试过重...
- 2
回答
61浏览
VSCode调试HTML文件时断点不生效怎么办？
我在用VSCode调试一个简单的本地HTML页面，但打的断点完全没反应，控制台也没报错，是不是配置有问题？ 我试过用Live Server打开页面，也在launch.json里加了Chrome配置，但...
- 2
回答
44浏览
VSCode主题颜色怎么自定义才能高亮React组件名？
我最近在用VSCode写React，想让自定义主题里组件名（比如MyButton）显示成醒目的颜色，但改了tokenColors好像没生效。试过把"support.class.component"设成...
- 2
回答
45浏览
VSCode 里跳转到定义失效了怎么办？
最近在写 React 项目，VSCode 突然不能按住 Ctrl 点击跳转到函数定义了，之前好好的。我试过重启编辑器、重装插件，也检查了 jsconfig.json 文件，但还是不行。 我的项目结构是...
- 2
回答
89浏览
VSCode调试时设置断点后代码不暂停怎么办？
最近在用VSCode调试JavaScript代码，设置了断点但运行时完全不暂停。试过重启VSCode和电脑都不行，是不是哪里配置错了？ 我的launch.json配置是这样的： { "version"...
- 2
回答
108浏览
React组件在移动端断点调试时，断点未触发怎么办？
我在用Chrome调试移动端React页面时遇到了问题。给组件方法加了断点，但真机运行时断点始终没触发，这是怎么回事？ 代码是这样的：function Counter({ initial }) { c...
- 2
回答
59浏览
Parcel打包React项目时CSS样式不生效怎么办？
最近用Parcel打包React项目，发现导入的CSS文件样式完全没生效。我已经按官方文档配置了，代码也没报错，但页面就是没样式。之前用Webpack没问题，Parcel是不是有什么特殊设置？ 比如在...
- 2
回答
53浏览
VSCode 用户代码片段不生效是怎么回事？
我写了个 React 的用户代码片段，但输缩写完全没反应，试了重启 VSCode 也没用。 我的 snippets 文件里是这么配的： { "React Functional Compone...
你的launch.json配置有几个问题需要调整：
第一个问题是Chrome的启动方式。用"launch"模式的话，需要让VSCode帮你启动Chrome，并且要加上远程调试端口。改成这样：
注意webRoot我改成了${workspaceFolder}而不是${workspaceFolder}/src，因为CRA编译后的sourceMap路径是相对于项目根目录的。
第二个问题是sourceMap。你需要确认一下package.json里有没有配置GENERATE_SOURCEMAP=true（或者干脆不写，默认是true）。如果编译时没生成sourcemap，断点肯定打不上。
还有个更省心的做法——用"attach"模式替代"launch"：
操作流程是：先手动打开Chrome（命令加上--remote-debugging-port=9222），然后在VSCode里按F5启动调试。
另外提醒一下，VSCode的Debugger for Chrome插件已经deprecated了，现在官方推荐用JS Debug Terminal或者直接用Edge浏览器的调试器，不过Chrome配置思路是一样的。
你先试试第一种launch方式的配置，把Chrome路径改成你本机实际的安装路径，应该就能正常断点了。
你的 webRoot 设置成了
${workspaceFolder}/src，但实际上应该是${workspaceFolder}，也就是项目根目录。VSCode 需要从根目录去匹配 source map，而不是从 src 目录开始。我的做法是直接改成这样：
关键改动有两点。第一，webRoot 改成项目根目录。第二，加上 sourceMapPathOverrides 配置，因为 Create React App 用 webpack 打包后的 source map 路径是
webpack:///src/*这种格式，需要手动映射回本地的 src 目录。另外多说一句，Debugger for Chrome 这个插件已经废弃了，VSCode 现在内置了 JavaScript Debugger，建议把插件卸载掉，直接用内置的就行，体验更好。
改完配置记得重启一下调试，断点应该就能正常命中了。如果还不行，检查一下 CRA 项目有没有正常生成 source map，开发环境下默认是开启的，但如果你改过配置就得注意一下。