断点不生效主因是sourcemap配置错误或调试配置不当：需确认vite dev默认启用inline sourcemap、launch.json用pwa-chrome类型、url端口匹配、webroot正确设置，且页面加载完成后再attach调试器。
VSCode 调试 Vite 项目时断点不生效？先确认 dev server 是否启用了 sourcemap
断点失效最常见的原因是 Vite 启动时没生成或没暴露正确的 sourceMap。Vite 默认开发模式下是开启的，但如果你改过 vite.config.ts 里的 build.sourcemap 或误加了 server.sourcemap = false（这个配置根本不存在，Vite 不认），就可能破坏调试链路。
-
vite.config.ts中无需手动配置 sourcemap —— 开发模式（vite dev）默认启用sourceMap: true，且走的是内存中的 inline source map，不落地为 .map 文件 - 检查是否无意中设置了
resolve.alias指向了未经 Babel/TS 处理的原始 node_modules 源码（比如直接 alias 到package/src），这类代码没有对应 source map，断点会跳到编译后代码上 - 确保启动命令是
vite或vite dev，而不是vite build && vite preview—— 后者是静态产物，无热更新、无调试支持
launch.json 怎么写才能连上 Vite 的 dev server？
Vite 本身不提供调试协议入口，VSCode 是通过 chrome 或 ms-edge 调试器 attach 到浏览器进程实现的，不是 attach 到 vite 进程本身。所以 launch 配置本质是「打开浏览器 + 自动 attach」。
- 必须用
type: "pwa-chrome"或"pwa-msedge"，旧版chrome类型在 VSCode 1.8+ 已弃用，会导致无法连接 -
url必须和 Vite 控制台输出的地址一致（通常是http://localhost:5173），不能写错端口；如果改过vite.config.ts的server.port，这里也要同步 - 加上
"webRoot": "${workspaceFolder}"，否则 VSCode 找不到源码映射路径，断点显示为「未绑定」 - 示例最小可用配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch with Chrome",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
注意：sourceMapPathOverrides 在 Vite 项目里通常不需要 —— 它默认生成的 source map 路径已能被正确解析；只有当你用别名或 monorepo 导致路径错位时才需微调。
为什么修改代码后断点还在、但没进 debugger？热更新（HMR）和调试器冲突吗？
不冲突，但 HMR 更新模块后，Chrome 有时不会自动刷新 debugger 的执行上下文，导致你看到的仍是旧函数体。这不是 bug，是调试器缓存行为。
- 改完代码保存后，如果断点没触发，先按
F5刷新页面（不是重启调试），让新模块加载并重建执行栈 - 避免在
node_modules里打条件断点（如debugger写在依赖包源码里）—— HMR 不会监听这些文件，修改后不会触发更新，断点也不会重新绑定 - Vite 的 HMR 默认只更新组件/模块，不触发布局重绘或全局状态重置；如果你依赖
mounted/useEffect等钩子初始化调试逻辑，要手动触发一次，否则断点可能卡在未执行分支
Vue/React 项目里 debugger 跳到 .ts 文件还是 .js？怎么确保停在源码行
取决于你用的构建配置和 VSCode 的 source map 解析能力。Vite 默认生成 inline source map，理论上应直接映射回 .ts 或 .vue，但某些场景会 fallback 到编译后 JS。
- 检查 TSX/JSX 文件顶部是否有
// @ts-nocheck或// eslint-disable-next-line类注释干扰了 TS 编译器对 source map 的标注 - Vue 单文件组件中，
<script setup></script>的编译结果路径较深，VSCode 偶尔匹配失败；此时可在launch.json中加一行："skipFiles": ["<node_internals>/**"]</node_internals>，减少干扰 - 运行
npx vite build --sourcemap看 dist 目录下是否有 .map 文件生成 —— 如果有，说明 sourcemap 机制正常；如果没有，问题出在构建配置而非调试器
真正容易被忽略的是：Vite 的 dev server 启动后，VSCode 的调试器必须在页面加载完成后再 attach，否则 source map 尚未注入，断点会挂载失败。不要在终端刚打出 ready in XXX ms 就立刻点「开始调试」，等浏览器窗口真正渲染出内容再操作更稳。
