VS Code+Vite+React+Firefox断点调试异常：断点错位、行号错误

问题背景 #

项目从react-scripts迁移至Vite后，Firefox环境下断点调试出现异常：断点跳转到无关位置、无法触发，运行时异常的行号显示严重错误。项目核心依赖如下：

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"typescript": "^5.2.2",
"@vitejs/plugin-basic-ssl": "~1.1.0",
"@vitejs/plugin-react-swc": "^3.0.1",
"vite": "^5.2.0",
"vite-plugin-svgr": "^3.3.0",
"vite-tsconfig-paths": "^4.0.3"

修复步骤 #

1. 修正Vite配置（vite.config.js） #

核心问题：

• 插件数组嵌套了额外层级，导致加载逻辑异常
• 未明确配置开发环境的sourcemap类型
• SWC插件未针对性配置sourcemap生成规则

修改后配置：

import basicSsl from "@vitejs/plugin-basic-ssl";
import react from "@vitejs/plugin-react-swc";
import { defineConfig, loadEnv } from "vite";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), "");
    const base = env.PUBLIC_URL ?? "/";
    return {
        base,
        define: {
            'process.env': env
        },
        server: {
            cors: { origin: "*" },
            port: 3000,
            host: "localhost",
            // 强制开启开发环境sourcemap
            sourcemap: true
        },
        // 修复插件数组嵌套问题，平铺加载插件
        plugins: [
            basicSsl(), 
            tsconfigPaths({ loose: true }), 
            react({
                // 配置SWC生成精准的inline sourcemap
                swcOptions: {
                    sourceMaps: "inline",
                    jsc: {
                        transform: {
                            react: { runtime: "automatic" }
                        }
                    }
                }
            }), 
            svgr()
        ],
        resolve: {
            extensions: [".js", ".jsx", ".ts", ".tsx", ".svg"]
        },
        assetsInclude: ["**/*.md"],
        build: {
            sourcemap: true,
            outDir: "build"
        },
    }
});

2. 调整VS Code调试配置（launch.json） #

核心问题：

• pathMappings配置冗余，webRoot已覆盖基础映射
• 未开启reloadOnAttach，导致修改后sourcemap未更新
• 缺少强制路径映射规则，解决sourcemap路径不匹配问题

修改后配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "attach",
            "name": "Attach to Firefox",
            "url": "https://localhost:3000",
            "webRoot": "${workspaceFolder}/src", // 精准指向源码目录
            "host": "127.0.0.1",
            "reloadOnAttach": true, // 附加调试时自动重载页面
            "skipFiles": ["**/node_modules/**"],
            // 强制sourcemap路径映射，修正行号错位
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/*",
                "/*": "${webRoot}/*"
            }
        }
    ]
}

3. 辅助环境设置 #

• Firefox开发者工具中，勾选「禁用缓存（当工具打开时）」（F12 → 右上角齿轮图标），避免旧sourcemap缓存干扰
• 重启Vite开发服务和VS Code，确保所有配置生效
• 仅在开发模式（执行vite命令）下调试，生产构建模式不适合断点调试

结论 #

无需换回react-scripts，通过上述配置调整即可实现Vite、React、Firefox与VS Code的精准断点调试。

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