VS Code调试React项目：断点已设置但未绑定问题排查

嗨，这个问题我之前在调试Gulp构建的React项目时也碰到过，主要是调试器没法正确关联编译后的代码和你src目录里的原始文件，下面给你拆解原因和解决办法：

核心原因分析 #

这个警告本质是VS Code的Chrome调试器找不到断点对应的源映射（source map），或者路径映射配置不匹配，导致断点无法绑定到原始代码上。

具体解决步骤 #

1. 确保Gulp打包时生成了正确的Source Maps #

React代码需要经过Babel编译，你得确保Gulp在打包过程中生成了source map文件，不然调试器根本没法把浏览器里运行的编译后代码映射回你写的原始代码。

比如你的Gulp任务里要用上gulp-sourcemaps插件，配置示例：

const gulp = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('build-react', () => {
  return gulp.src('src/**/*.{js,jsx}')
    .pipe(sourcemaps.init()) // 初始化source map
    .pipe(babel({
      presets: ['@babel/preset-react', '@babel/preset-env']
    }))
    .pipe(sourcemaps.write('.')) // 把source map文件输出到编译后文件的同目录
    .pipe(gulp.dest('dist')); // 输出编译后的代码到dist目录
});

注意sourcemaps.write('.')会生成和编译后JS同名的.map文件，这是调试器能识别的关键。

2. 修正launch.json里的webRoot配置 #

你的代码都在c:\psadmin\src目录下，但当前webRoot设为${workspaceFolder}（也就是c:\psadmin），调试器会从根目录开始找文件，没法精准定位到src里的代码。

把webRoot改成${workspaceFolder}/src，这样调试器就会直接从你的源码目录开始匹配。

3. 添加sourceMapPathOverrides（可选但关键） #

有时候即使webRoot对了，编译后的source map里的路径格式（比如webpack:///./src/xxx.js）和本地路径不匹配，这时候需要手动映射路径。

修改后的完整launch.json配置：

"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:9005",
        "webRoot": "${workspaceFolder}/src",
        "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
        }
    }
]

这个配置会把source map里的webpack:///./src/开头的路径，映射到你本地的${webRoot}（也就是c:\psadmin\src）路径下。

最后验证步骤 #

1. 重新运行Gulp打包任务，确保dist目录下有对应的.map文件
2. 重启VS Code的调试会话
3. 再设置断点，应该就不会出现“Unverified breakpoint”的警告了

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