Svelte/Vite/TypeScript浏览器Source Map突发异常，生成JS文件可见

1. 检查Chrome DevTools核心设置 #

• 打开DevTools，点击右上角齿轮进入设置
• 切换到Sources标签页：
  • 必须勾选Hide compiled JavaScript，这是隐藏生成JS文件的关键
  • 确认Enable JavaScript source maps和Enable CSS source maps已勾选

2. 调整Vite的Sourcemap配置 #

在项目根目录的vite.config.ts（或vite.config.js）中，明确指定开发模式下的sourcemap类型，确保源码映射正确关联：

原生Vite+Svelte+TS项目配置

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  server: {
    sourcemap: 'inline' // 可选值：'inline'/'both'，优先推荐inline
  }
})

SvelteKit项目配置

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

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    sourcemap: 'inline'
  }
});

3. 强制清除缓存并重启服务 #

• 关闭当前DevTools窗口
• 执行命令npm run dev -- --force，强制清除Vite的缓存文件
• 重新打开DevTools，刷新页面后再搜索.svelte文件

4. 排查Vite版本兼容性 #

如果近期更新过Vite，可能是新版本默认sourcemap配置发生了变化。可以尝试回退到之前能正常调试的Vite版本，或者查阅Vite官方文档确认当前版本的sourcemap默认行为。

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