断点打不进源码的根本原因是sourcemap未被浏览器正确加载或路径不匹配，需依次验证sourcemap生成、可访问性、launch.json中outfiles/webroot配置、chrome sourcemap开关及devtool类型是否正确。
断点打不进源码？不是 VSCode 配置错了，而是 sourcemap 没被浏览器加载或路径根本对不上。 调试失效的绝大多数情况，跟 launch.json 里少写一个星号、devtool 选错类型、或者 sourceMappingURL 指向了 404 的 .map 文件直接相关。
确认 sourcemap 真的生成且可访问
VSCode 不会自己生成 sourcemap，它只消费构建工具输出的结果。先别碰配置文件，打开浏览器 DevTools → Sources → 刷新页面，看左侧有没有出现 webpack:// 或 app:// 下的源码树。没有？说明问题出在源头。
- 检查编译产物目录（如
dist/或.next/）下是否存在.map文件，比如index.js.map - 打开生成的
.js文件，末尾必须有且仅有一行：//# sourceMappingURL=index.js.map；路径要是相对路径（如./index.js.map），不能是绝对路径或错误拼写 - 在 Chrome Network 面板过滤
.map，确认请求返回 200 —— 如果是 404，说明开发服务器没把.map当静态资源暴露出来 - Vite 用户注意：
vite build默认关闭 sourcemap，必须显式配build.sourcemap: true；Vue CLI 用户检查vue.config.js中devtool是否被设为false
launch.json 中 outFiles 和 webRoot 必须精确匹配
outFiles 不是指源码位置，而是告诉 VSCode：“这些 JS 文件是编译产物，请去它们旁边找 .map 并反向映射回源码”。webRoot 则影响浏览器 sourcemap 里 sources 字段的路径解析逻辑。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
outFiles示例：若 TS 编译到dist/，填["${workspaceFolder}/dist/**/*.js"]；若用 Vite 输出多格式（dist/es/+dist/lib/），就得写全：["${workspaceFolder}/dist/es/**/*.js", "${workspaceFolder}/dist/lib/**/*.js"] -
webRoot常见填法："${workspaceFolder}"（项目根目录）；但如果 HTML 入口在public/index.html且服务根路径是dist/，那得设为"${workspaceFolder}/dist"，否则webpack:///src/App.vue无法映射到真实文件 - React/Vue 项目常需
sourceMapPathOverrides：例如 Vite 项目加"webpack:///./src/*": "${webRoot}/src/*"，少一个/或*就断点灰掉
Chrome 调试必须开 source maps 且 type 设对
VSCode 的前端调试依赖 Chrome DevTools 的协议能力，不是纯本地行为。即使 launch.json 写得再准，Chrome 自己关了 sourcemap 解析，照样白搭。
-
type字段必须是"pwa-chrome"（新版 Debugger for Chrome / Edge Tools），不是"chrome"（旧插件已弃用） - Chrome 设置里要手动开启：
Settings → Preferences → Sources → Enable JavaScript source maps - 确保
url和你实际访问的地址完全一致：包括协议（http还是https）、端口（:3000还是:5173）、路径（/还是/app/） - 启动前禁用 Chrome 缓存（Network 面板勾选
Disable cache），否则可能复用旧 bundle，压根不请求新 .map
Webpack 用户特别注意 devtool 类型和路径映射
Webpack 默认的 mode: "development" 用的是 eval 类型 sourcemap，它不生成独立 .map 文件，VSCode 无法读取，断点必然失效。
- 必须显式设
devtool: "source-map"（生成独立文件）或"inline-source-map"（内联 base64，VSCode 支持更稳）；避免用"eval-source-map"，断点偏移是常态 - 如果 sourcemap 里的路径是
webpack:///./src/App.jsx，但你的源码在src/下，就一定要配sourceMapPathOverrides把前缀去掉，否则 VSCode 找不到对应文件 - 用
webpack-dev-server时，确认它读的是你改过的webpack.config.js，而不是某个缓存副本或 node_modules 里的默认配置
真正卡住人的往往不是某一个配置项写错，而是多个路径环节（构建输出路径、sourcemap 注释路径、webRoot、sourceMapPathOverrides）之间差了一个 / 或层级没对齐。建议每次改完，都重新检查一遍 Chrome Sources 面板是否出现了原始文件结构——这是最直接有效的验证方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
