断点打不进src/文件的根本原因是devtool、sourceMapPathOverrides和调试目标三者未对齐：devtool须设为source-map或inline-source-map，禁用eval系列；sourceMapPathOverrides需按Chrome Sources中显示的路径前缀精准映射；launch.json中type必须为pwa-chrome、url须与dev server完全一致、webRoot应指向项目根目录。
断点打不进 src/ 文件？不是 VSCode 有问题，而是 devtool、sourceMapPathOverrides 和调试目标三者没对齐。
devtool 必须设为 source-map 或 inline-source-map
Webpack 默认 development 模式用的是 eval-source-map，它把映射塞在 eval() 字符串里，Chrome DevTools 能认，但 VSCode 调试器解析不了——断点会漂移、变空心、甚至直接跳错文件。
-
devtool: "source-map"：生成独立的main.js.map文件，路径清晰，VSCode 最稳，推荐用于调试 -
devtool: "inline-source-map"：base64 编码的 map 写在 JS 文件末尾，免 I/O，但某些代理或 CDN 可能截断sourceMappingURL注释导致失效 - 绝对避开所有
eval系列：eval-source-map、cheap-module-eval-source-map等——它们不落地 .map 文件，VSCode 无法定位原始源码 - Vue CLI 用户注意：
productionSourceMap: true不影响 dev server，必须在vue.config.js的configureWebpack.devtool里显式设值
sourceMapPathOverrides 映射规则怎么写才不失败
VSCode 拿到浏览器返回的 sources 字段（比如 webpack:///./src/App.tsx），再按 sourceMapPathOverrides 规则去本地找真实文件。配错就显示 “No source available”。
- 先打开 Chrome DevTools → Sources 面板 → 展开 localhost → 右键压缩 JS → “Reveal in sidebar”，看左侧显示的路径前缀（常见有
webpack:///./src/、webpack:///src/、webpack://my-project/src/） -
${webRoot}必须是项目根目录（即webpack.config.js所在位置），不是src或dist - 统一用正斜杠
/，Windows 下也别用\ - 典型配置示例：
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/src/*",
"webpack:///src/*": "${webRoot}/src/*",
"webpack:///./*": "${webRoot}/*"
}
- 如果用了 monorepo 或
resolve.alias（如@/指向packages/utils），还得加类似"webpack:///@/*": "${webRoot}/packages/*"
launch.json 的 type 和 url 必须严格匹配运行环境
VSCode 1.80+ 已停用旧版 chrome 调试器，必须用 pwa-chrome，否则连接失败或断点加载失败。
-
type必须是"pwa-chrome"，不是"chrome" -
url必须与 dev server 完全一致（比如"http://localhost:5173"），多一个斜杠或端口不对都会导致断点不生效 -
webRoot应设为"${workspaceFolder}"（项目根目录），不是"${workspaceFolder}/src"或其他子路径 - 确保
sourceMaps设为true（这是 VSCode 调试器开关，和 Webpack 的devtool是两回事）
最容易被忽略的是：断点失效时，很多人直接改配置，却忘了先确认浏览器是否真的加载了 sourcemap。打开 Chrome DevTools → Network 面板 → 过滤 .map，看有没有 404；再检查 Sources 面板里有没有出现 webpack:// 下的源码树——没有，说明问题根本不在 VSCode，而在构建源头。
