必须先运行开发服务器再启动vscode调试器，否则断点不命中；因sourcemap路径不匹配（webpack:///src/→src/），需配置sourcemappathoverrides和resolvesourcemaplocations，且webroot、url等参数须准确，浏览器必须用http://localhost:5173访问。

必须先运行开发服务器，再启动 VSCode 调试器；否则断点根本不会命中 <script></script> 块。

为什么断点停在空白行或完全不触发

这不是代码写错了，而是 VSCode 找不到源码映射位置。Vite 编译后生成的 JS 里有 sourcemap，但默认路径是 webpack:///src/xxx 这种格式，而实际文件在 src/ 下——两者不匹配，调试器就“看”不见你的 <script></script>。

• 确保 launch.json 中设置了 "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/src/*"}
• 必须加上 "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]，Svelte 5+ 环境下漏掉这行，断点必失效
• 浏览器地址栏必须是 http://localhost:5173；如果是 file:// 协议，断点一定无效
• 开发服务器（npm run dev）必须已运行，且端口未被占用

launch.json 配置要点

用 type: "pwa-chrome" 直连容易因协议或跨域失败；推荐更稳的组合：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 用 type: "node-terminal" 启动终端命令，避免 Chrome 实例干扰
• "url": "http://localhost:5173" 必须显式指定，不能省略
• "webRoot": "${workspaceFolder}/src" 是基础路径，所有路径映射都基于它
• 不要复用旧 Webpack 项目的 launch.json 模板——Vite 默认不用 webpack，但 sourcemap 路径名仍沿用它

调试前必须确认的三件事

少一个，F5 就白按：

• 右下角状态栏显示的是 Svelte，不是 HTML 或 Plain Text；如果显示 HTML，点击 → 选 Svelte → 勾选 “Always use Svelte for '.svelte' files”
• 项目根目录存在 svelte.config.js（哪怕只写 export const config = {}），否则语言服务不激活，$: 和 export let 全部无提示，调试信息也残缺
• 执行过 Cmd+Shift+P → Svelte: Restart Language Server；仅 Reload Window 不够，缓存会卡住旧配置

最容易被忽略的是 resolveSourceMapLocations 这个字段——它不像 sourceMapPathOverrides 那样常被复制粘贴，但 Svelte 5+ 的调试链路里，它才是决定 VSCode 能不能“看见”你写的那行 $: doubled = count * 2 的关键开关。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！