如何解决VSCode中调试Svelte应用时无法设置断点的问题

1. 确保项目开启Sourcemap生成 #

根据你使用的构建工具，检查对应配置文件，确保开启Sourcemap生成：

• Vite项目：在vite.config.js中添加或确认配置：

  export default {
    build: {
      sourcemap: true,
    },
    server: {
      sourcemap: true // 开发环境必须开启
    }
  }
  

• Rollup项目：在rollup.config.js的output段设置：

  output: {
    sourcemap: true,
    // 其他输出配置...
  }
  

• SvelteKit项目：在svelte.config.js的Vite子配置中开启：

  import adapter from '@sveltejs/adapter-auto';
  
  const config = {
    kit: {
      adapter: adapter(),
      vite: {
        build: { sourcemap: true },
        server: { sourcemap: true }
      }
    }
  };
  
  export default config;
  

2. 修正VSCode的launch.json配置 #

确保调试配置中包含Sourcemap解析相关选项，以下是Chrome/Edge调试的标准配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for Svelte",
      "url": "http://localhost:5173", // 匹配你的开发服务器端口
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**" // 排除第三方依赖的Sourcemap干扰
      ]
    }
  ]
}

核心配置说明：

• webRoot：指向源码根目录，确保调试器能定位到原始文件
• sourceMaps：强制开启Sourcemap解析
• resolveSourceMapLocations：限定Sourcemap查找范围，避免无效映射

3. 调整断点操作方式 #

• 直接在原始.svelte文件的<script>标签内或独立JS文件中设置断点，不要切换到编译后的临时文件
• 若断点仍无法绑定，可尝试在代码中手动添加debugger;语句，触发调试器自动定位

4. 清理缓存重启服务 #

• 关闭VSCode所有调试会话，重启编辑器
• 删除项目的构建缓存目录（如node_modules/.vite、dist），重新启动开发服务器

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