VSCode中Node环境对.vue/.svelte单文件组件在服务端的预渲染调试-VSCode-PHP中文网

根本原因是服务端逻辑运行在独立node.js进程，vscode默认只调试浏览器js；必须用node-terminal启动带--inspect的进程，并配置resolvesourcemaplocations才能定位源码。

vscode中node环境对.vue/.svelte单文件组件在服务端的预渲染调试

为什么 `npm run dev` 启动后，`.vue` 或 `.svelte` 里的服务端逻辑断点不生效

根本原因不是代码没跑，而是 VSCode 默认只调试客户端 JS，而 SSG/SSR 预渲染（如 load 函数、server load、getServerSideProps）实际运行在 Node.js 进程里，和浏览器完全隔离。你打在 <script></script> 块里的断点，只有在浏览器上下文才可能命中；服务端那段逻辑，必须用 Node.js 调试器连上对应进程。

`launch.json` 里该用 `type: "node-terminal"` 还是 `type: "pwa-node"`

推荐 type: "node-terminal"，尤其对 Vite/SvelteKit/Vue CLI 项目：

type: "pwa-node" 要求手动指定 program 入口（比如 node_modules/vite/bin/vite.js），但 Vite/SvelteKit 的启动脚本是封装过的 shell 命令，直接指定容易路径错、参数漏
type: "node-terminal" 直接复用 npm run dev 命令，在终端里启动带 --inspect 的 Node 进程，VSCode 自动 attach，兼容性更好
若用 pwa-node，必须加 "runtimeArgs": ["--inspect-brk"] 和正确 "program"，否则断点错过初始化阶段

服务端断点能打在哪？哪些地方根本不能设断点

可设断点的位置（以 SvelteKit 为例）：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

src/routes/+page.server.ts 里的 load 函数体
src/hooks.server.ts 中的 handle 或 handleError
src/lib/server/db.ts 等纯 Node 模块中被服务端调用的函数

不能设断点的地方：

<script></script> 标签内任何代码（除非显式标记为 ssr: false 或用 browser 条件包裹）
onMount、beforeNavigate 等仅浏览器执行的生命周期
import.meta.env 在服务端是空对象，断点进去看到的值不反映真实 SSR 上下文

`resolveSourceMapLocations` 对服务端调试到底有没有用

有用，但只对“源码映射”起作用——它让 VSCode 把编译后的 JS 行号，反查回你写的 .svelte 或 .vue 文件位置。但它不解决进程隔离问题：

漏掉 "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]，VSCode 找不到 +page.server.ts 对应的原始文件，断点显示为“未绑定”
即使配了，如果没用 node-terminal 或 --inspect 启动，断点依然不触发——因为调试器根本没连上那个 Node 进程
Vue 项目同理：serverPrefetch 或 Nuxt 的 asyncData 函数，也依赖这个字段才能定位到 .vue 里的源码行

真正容易被忽略的是：服务端调试必须同时满足两个条件——进程被 --inspect 启动，且 sourcemap 路径能正确回溯。少一个，断点就静默失效。