断点不生效主因是sourcemap路径映射错误；需检查.map文件中sources字段是否唯一、无非法字符，统一devtoolmodulefilenametemplate格式，并在launch.json中正确配置resolvesourcemaplocations和webroot。
断点打在 .ts 或 .vue 文件里却没停住，悬停提示“unbound breakpoint”，常见原因之一是 SourceMap 里的源码路径（sources 字段）和实际文件位置对不上——比如名字重复、前缀多了一层 webpack://、或本地路径被转成绝对 URL 后浏览器拒绝加载。这不是代码没跑，是“地图”指错了路。
检查 SourceMap 的 sources 字段是否唯一且可识别
用浏览器打开 app.js.map（Network 面板找对应请求，状态码必须是 200），搜索 "sources" 字段。重点看两点：
- 多个文件是否共用同一个路径名（例如都叫
index.js），尤其在 monorepo 或多包项目中，packages/a/src/index.ts和packages/b/src/index.ts编译后若没加包名前缀，map 里就全变成index.js，调试器无法区分 - 路径是否含非法字符或 Windows 风格反斜杠（
\），部分构建工具在跨平台时未转义，导致浏览器解析失败 - 建议用
source-map-explorer或 VS Code 插件 Source Map Visualization 直观查看映射关系
统一 devtoolModuleFilenameTemplate，避免路径前缀错乱
Webpack/Vite/Rollup 默认生成的路径常带 webpack:///./src/ 或 app:// 这类虚拟协议，VS Code 或 Chrome 无法直接定位本地文件。需主动控制输出格式：
- Webpack：在
output.devtoolModuleFilenameTemplate中设为'file:///[absoluteResourcePath]'（本地调试）或'[relativeResourcePath]'（配合public/目录静态托管） - Vite：通过
build.rollupOptions.output.sourcemapPathTransform自定义路径重写逻辑，例如把../src/替换为src/ - Rollup：设置
output.sourcemapFile并确保output.paths映射正确，避免node_modules中同名文件覆盖源码路径
验证 launch.json 或调试配置中的路径放行规则
VS Code 调试 Node 或前端时，即使 map 文件内容正确，也可能因路径未被信任而跳过映射：
- Node 调试：在
launch.json中添加"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]，显式放行工作区所有子目录 - 前端调试（pwa-chrome）：确认
webRoot指向项目根目录（如"${workspaceFolder}"），而非dist/或public/ - 多包项目：若源码在
packages/ui/src，resolveSourceMapLocations必须包含"${workspaceFolder}/packages/**/src/**"，否则调试器直接忽略
用 Sources 面板手动确认映射结果
别只信断点颜色，直接看浏览器 DevTools 的 Sources 面板：
- 刷新页面后，在左侧文件树展开
webpack://或app://，看能否看到你期望的src/components/Button.vue - 如果只显示
157.js或一堆数字命名的文件，说明sources字段未被正确解析；如果显示路径但点击报错“Failed to load content”，大概率是路径前缀导致跨域或本地文件协议被拦截 - 右键任一源文件 → “Reveal in sidebar”，强制列出所有已识别的原始文件，快速比对是否缺失关键模块
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
