VSCode调试Vue需先运行开发服务，配置正确sourceMapPathOverrides与webRoot，并启用Chrome远程调试端口；点“Accept Current Change”后必须git add暂存才能解除Git冲突。
VSCode 不会自动处理代码冲突，也不会离线调试 Vue 页面——这两件事都依赖明确的配置和运行时上下文，缺一不可。
VSCode 为什么点“Accept Current Change”后 Git 还报冲突？
按钮只是改内容，不是告诉 Git “我搞定了”。Git 的状态机不看编辑器 UI，只认 git add 是否执行。
-
git status显示Unmerged paths，说明 Git 仍卡在合并流程中，哪怕你删光了所有<<<<< HEAD标记 - 点击 Accept 按钮后，必须手动
git add <file>，或在 VSCode 源代码管理视图里点文件旁的+号暂存 - 如果用了
git mergetool命令唤起 VSCode，关掉窗口后 Git 才会继续；没关窗就切终端，Git 会一直等 - 多个冲突块要逐个处理：一个 Accept 按钮只影响当前光标所在的那个冲突区域，不会扫全文件
Vue 断点灰色、点不进去？先查 source map 路径映射
断点失效几乎全是 sourceMapPathOverrides 配错导致的。Vite 和 Vue CLI 的路径规则完全不同，混用必失败。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- Vite 项目（默认端口
5173）："sourceMapPathOverrides": { "/src/*": "${webRoot}/src/*" }或更宽松的"*": "${webRoot}/*" - Vue CLI（Webpack，端口
8080）："sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" } -
webRoot必须是项目根目录，不是src目录；填错会导致调试器找不到.vue文件对应源码 - 检查浏览器开发者工具 Sources 面板里有没有
webpack://或/src/开头的源码树，没有就说明 source map 没加载成功
VSCode 能不能不连本地服务直接调试 Vue？
不能。所谓“离线调试”是误解——VSCode 的 Debugger for Edge 插件本质是远程 attach 到已运行的浏览器实例，它本身不启动 Vue 应用，也不解析 .vue 单文件组件。
立即学习“前端免费学习笔记（深入）”；
- 你必须先手动运行
npm run dev或vite，让服务起来（如http://localhost:5173） -
launch.json中的url字段必须和你在浏览器地址栏能打开的那个 URL 完全一致（协议、域名、端口、路径都不能少） - Chrome 浏览器需额外加启动参数
--remote-debugging-port=9222，否则 VSCode 连不上 - 如果想让 F5 一键启动服务+调试，得配
preLaunchTask并写好tasks.json，这不是开箱即用的功能
真正的“离线”场景（比如打开本地 file:// HTML）无法调试 Vue，因为缺少开发服务器提供的模块热更新、source map 注入和跨域代理能力。
