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 中未关闭。
- 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 生效的直接证据
在 <script setup></script> 中打断点失败？检查 Volar 的 TS 服务模式
这是最常被忽略的一环：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 的路径映射逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
