VS Code 调试 Vue 需 Volar 插件 + 正确 launch.json 配置 + source map 支持；必须启用 Take Over Mode、设对 webRoot 为 ${workspaceFolder}、确保浏览器加载了 webpack:// 源码树。
VS Code 本身不内置 Vue 调试能力，必须靠插件 + 正确的启动配置协同工作；直接装个插件点 F5 就断点，基本会失败。
安装必备插件：Volar 而不是 Vetur
Vetur 已废弃，Vue 3 项目必须用 Volar（官方推荐）。它提供语法高亮、template 内响应式类型推导、ref/computed 自动补全。安装后需在 VS Code 设置中禁用 Vetur（如有），否则两者冲突导致 script setup 无法识别、跳转失效。
- 打开 Extensions（Ctrl+Shift+X），搜
Volar，安装并重载窗口 - 进入
Settings → Extensions → Volar，勾选Enable Take Over Mode（接管 TS/JS 语言服务） - 确保项目根目录有
tsconfig.json或jsconfig.json，否则 Volar 的类型提示会降级
配置 launch.json 启动调试：关键在 url 和 webRoot
Vue CLI 或 Vite 项目默认不启用 source map 的远程调试支持，launch.json 必须显式指向开发服务器地址，并告诉 Debugger 源码映射位置。常见错误是写错 webRoot（应为项目根目录，不是 src），或漏掉 sourceMapPathOverrides 导致断点灰色不可用。
- 在项目根目录创建
.vscode/launch.json，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173", // Vite 默认端口；Vue CLI 是 8080
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*",
"webpack:///./src/*": "${webRoot}/src/*",
"webpack:///src/.": "${webRoot}/src"
}
}
]
}
-
url必须与你实际运行npm run dev后浏览器访问的地址完全一致（含端口） - 若用 Firefox，改
type为pwa-firefox，并确保已安装 Firefox Developer Edition
确保构建工具生成 source map：Vite / Vue CLI 配置检查
即使 launch.json 写对，如果开发服务器没发 source map，Debugger 仍无法关联源码。Vite 默认开启，但 Vue CLI 项目需确认 vue.config.js 中未关闭。
大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中 进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看
立即学习“前端免费学习笔记（深入）”；
- Vite 项目：检查
vite.config.ts是否存在build.sourcemap: false—— 删除或设为true - Vue CLI 项目：检查
vue.config.js中是否有devServer.devMiddleware.writeToDisk: true（非必需，但某些代理场景需要）；重点确认configureWebpack里没覆盖devtool为false - 运行
npm run dev后，在浏览器 DevTools 的Sources面板下，展开webpack://节点，应能看到项目src目录结构 —— 这是 source map 生效的直接证据
在
这是最常被忽略的一环：Volar 在 Take Over Mode 下会接管 TS 语言服务，但 VS Code 的内置 JS/TS 插件可能仍尝试解析 setup 语法，导致断点不命中、console.log 行号错位。
- 务必确认已启用
Enable Take Over Mode（前面已提），且重载了窗口 - 打开任意
.vue文件，在右下角状态栏点击 TypeScript 版本标识，确认显示的是Volar (TS Server)，而非Typescript (Bundled) - 如仍无效，尝试在
.vue文件顶部加// @ts-nocheck临时绕过类型检查（仅调试用），排除类型系统干扰
真正卡住的地方往往不是配置项写错，而是 Volar 服务没接管、source map 没加载进浏览器、或者 webRoot 指向了子目录——这三者任何一个出问题，断点都会变空心圆。建议按顺序验证：先看浏览器 Sources 里有没有源码树，再看 VS Code 状态栏语言服务名，最后核对 launch.json 的路径映射逻辑。
