VSCode调试Vite项目断点不命中，首要确认是否误用vite preview而非vite dev；必须使用vite dev启动并配置PWA调试器、正确设置webRoot和sourceMapPathOverrides，同时确保vite.config.ts未禁用sourcemap。
VSCode 调试 Vite 项目时断点不命中？先确认是否用了 vite preview
断点不生效最常见的原因是：你正在用 vite preview 启动服务，而不是 vite dev。Vite 的调试能力依赖开发服务器的 sourcemap 和 WebSocket 连接，vite preview 是静态文件预览模式，不启动开发服务器，也不注入调试所需的 sourceMappingURL 或 HMR 脚本。
正确做法是始终用 vite dev（或 npx vite）启动开发服务，再让 VSCode 通过浏览器调试器连接它。
- 检查终端里运行的是不是
vite或vite dev，而不是vite preview - 确认控制台输出中有 “Local: http://localhost:5173/” 且带 “Press Ctrl+C to stop” 提示 —— 这才是 dev 模式
- 如果用了自定义端口（如
vite dev --port 3000），后续调试配置里的url必须同步改掉
launch.json 中 type: "pwa-chrome" 还是 "pwa-msedge"？
VSCode 自 1.8x 版本起默认使用 PWA 调试器（pwa-chrome / pwa-msedge），它取代了旧版 chrome 类型，支持现代 DevTools 协议和 ES 模块 sourcemap 解析。用错类型会导致断点灰色、无法停住、或报错 “Unable to launch browser”。
推荐配置（以 Chrome 为例）：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*",
"src/*": "${webRoot}/src/*"
}
}
-
webRoot必须设为项目根目录（${workspaceFolder}），否则 VSCode 找不到源码映射 -
sourceMapPathOverrides是关键：Vite 默认生成的 sourcemap 路径是src/xxx.ts，但浏览器里显示为webpack:///src/xxx.ts或直接src/xxx.ts，需显式对齐 - Edge 用户把
type改成pwa-msedge即可，其余字段完全一致
Vite 项目没生成 sourcemap？检查 vite.config.ts 里的 build.sourcemap
调试断点依赖浏览器能将压缩/转换后的代码映射回原始 .ts 或 .vue 文件。Vite 默认在 dev 模式下自动开启 sourcemap，但如果你改过配置、或误加了 build.sourcemap: false，就可能静默失效。
打开 vite.config.ts，确认没有以下禁用项：
- 删掉或注释掉
build: { sourcemap: false } - 不要在
defineConfig({ ... })外层加process.env.NODE_ENV === 'production'判断来开关 sourcemap ——dev模式下这个环境变量仍是development，但逻辑可能误判 - 若用
defineConfig+mode分环境，确保mode: 'development'下build.sourcemap未被覆盖
临时验证方法：打开浏览器开发者工具 → Sources 面板 → 展开 localhost → 查看是否有 src/ 下的原始文件（而非 chunk-xxx.js）。没有，就是 sourcemap 没生效。
断点命中但变量显示 undefined 或值不对？留意 Vite 的 esbuild 与 rollup 阶段差异
Vite 在 dev 模式下用 esbuild 做快速转译（TS → JS），但 sourcemap 由 rollup 插件链最终生成。两者行为不完全一致，尤其在装饰器、私有字段、或某些 TS 编译选项下，可能导致调试时变量名被重命名、作用域链错位。
- 优先在
.ts文件顶部加// @ts-nocheck排除类型检查干扰（仅调试时临时用） - 避免在箭头函数内联写复杂表达式，比如
const x = () => ({ a: 1 }).a;—— esbuild 可能优化掉中间对象，sourcemap 映射断裂 - 检查
tsconfig.json中compilerOptions.sourceMap设为true（虽然 Vite 不直读它，但部分插件会参考） - 如仍异常，可在
vite.config.ts中显式指定esbuild: { jsxInject: 'import React from "react"' }等，保持转译一致性
最易被忽略的一点：Vite 的 HMR 更新有时不会刷新 sourcemap 缓存，改完代码后如果断点突然失灵，关掉终端重启 vite dev 再试一次 —— 不要只刷新浏览器。
