vscode 断点调试 vite ssr 需配置 launch.json 指向 node_modules/vite/bin/vite.js,runtimeargs 设为 ["dev", "--mode", "ssr"],url 与实际服务地址一致,webroot 为 "${workspacefolder}",仅 server$、routedata、hooks/server 可断点,getstaticpaths 等构建期代码不可调试。

直接运行 vite dev --mode ssr 无法在 VSCode 中断点调试 SSR 中间件(如 server$、routeData 返回函数、hooks/server),因为 Vite 的 SSR 开发模式不是普通 Node.js 脚本,而是通过 Vite CLI 启动的完整 dev server —— 必须用 node 运行 Vite 的二进制入口,而非直接执行你的 TS 文件。
launch.json 必须指向 vite.js 二进制文件
VSCode 的 Node 调试器不理解 vite dev 命令本身,它只认识可执行的 JS 入口。Vite 的 CLI 实际是 node_modules/vite/bin/vite.js,这是唯一能被 type: "node" 正确加载并注入 debugger 的入口。
-
program字段不能写src/entry-server.ts或vite dev—— 会报错或静默失败 - 必须设为
"program": "${workspaceFolder}/node_modules/vite/bin/vite.js" -
runtimeArgs才负责传参:["dev", "--mode", "ssr"],不是靠args - 如果项目用了 pnpm/yarn,确保
node_modules/vite/bin/vite.js确实存在(pnpm 可能 symlink 到 store,但路径仍有效)
断点生效范围有明确边界
SSR 调试不是“所有服务端代码都能断”,Vite 的 SSR dev 模式只对运行时执行的逻辑挂载调试能力,构建期代码(如 getStaticPaths)根本不会进入 Node.js runtime。
- ✅ 可断点:
server$函数内部、routeData返回的异步函数、hooks/server里的导出函数 - ❌ 不可断点:
getStaticPaths、getStaticProps、generateStaticParams—— 它们跑在 Vite build 阶段,由vite build触发,和vite dev --mode ssr完全隔离 - ⚠️ 注意:断点打在
src/entry-server.ts的顶层代码(非函数内)通常无效 —— 它只是模块入口,实际逻辑由 Vite 内部动态 require 注入
url 和 sourcemap 映射必须手动对齐
Vite SSR dev server 默认启动在 http://localhost:5173(除非你改了 vite.config.ts 的 server.port),但 VSCode 不会自动读取这个配置 —— launch.json 里的 url 字段必须和你浏览器实际访问的地址一字不差。
-
url必须填完整协议+端口,例如:"url": "http://localhost:5173";如果启用了 HTTPS,就得写"https://localhost:5173" -
sourceMapPathOverrides不能照搬 Webpack 模板;Vite 默认用 inline source map,推荐删掉该字段,或仅保留:"*": "${webRoot}/*" -
webRoot必须是"${workspaceFolder}",不是"${workspaceFolder}/src"—— 否则vite.config.ts、package.json等根级文件的 source map 会映射失败 - 确保浏览器 DevTools 的 Sources 面板里能看到
webpack:///或file://开头的源码 —— 如果只看到http://下的 bundle,说明 source map 没加载成功
真正容易被忽略的是:SSR 断点依赖 Vite 的 runtime hook 注入机制,一旦你修改了 vite.config.ts 中的 ssr 配置(比如加了 noExternal 或自定义 external),或者用了非标准的 Solid Start / SvelteKit 模板,断点位置可能偏移甚至失效 —— 此时得回退到最小可复现配置再逐步加功能。











