如何在VS Code中调试SvelteKit客户端与服务端代码？断点问题及Vite兼容方案

1. 配置VS Code的launch.json文件 #

在项目的.vscode/launch.json中添加复合调试配置，同时启动客户端和服务端调试会话：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "SvelteKit: Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    },
    {
      "name": "SvelteKit: Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
      "args": ["dev"],
      "cwd": "${workspaceFolder}",
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"],
      "env": { "NODE_ENV": "development" }
    }
  ],
  "compounds": [
    {
      "name": "SvelteKit: Full Stack",
      "configurations": ["SvelteKit: Client", "SvelteKit: Server"]
    }
  ]
}

选择这个复合配置启动调试，即可同时关联客户端和服务端的断点。

2. 调整Vite配置以启用服务端Source Map #

在项目根目录的vite.config.ts中，确保启用服务端的source map，并禁用可能干扰断点映射的依赖预构建优化：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    sourcemap: true
  },
  ssr: {
    sourcemap: true,
    noExternal: true // 避免依赖被预编译导致断点失效
  }
});

3. 检查基础调试环境 #

• 使用Node.js 18+ LTS版本，避免老版本与Vite调试逻辑不兼容
• 不要手动在终端运行npm run dev，直接通过VS Code的调试面板启动配置；或者使用VS Code的**"JavaScript Debug Terminal"**执行启动命令

4. 验证断点有效性 #

• 服务端断点优先打在src/routes下的+server.ts、+page.server.ts等服务端专属文件中
• 如果断点显示为灰色（未绑定），尝试重启VS Code和调试会话，或清理项目的node_modules和.svelte-kit目录后重新安装依赖

内容的提问来源于stack exchange，提问作者Jesse Coble