bounty还有5天到期。回答此问题可获得+100声望奖励。jps_dot_dev希望引起更多关注这个问题：我花了几个月的时间试图纠正这个问题，这对我自己的开发产生了重大影响，我觉得相关的Github问题没有得到足够的关注，也没有提供有效的解决方案。

我正在使用WSL 2和/或Fedora 38与VScode和一个以前的CRA项目，我已经转换为Vite。自从迁移到Vite以来，我一直无法让VScode调试器在Chrome和Firefox中正常工作，因为每个浏览器的行为都不一样。我见过的最相关的行为是：

• 当调试器处于活动状态时，VScode有时无法绑定断点（Chrome）。
• 当调试器处于活动状态时放置断点时，VSCode会减慢到完全停止（Chrome）。
• VScode或浏览器指向已转换的文件，而不是源Map指向的本地文件。（Chrome/FF）
• Vite报告堆栈跟踪中不正确的行号（Chrome/FF）。
• 断点根本不会触发（Chrome/FF）。

我已经在launch.json和Vite.config.js中尝试了WSL 2和Fedora 38中的无数选项。我的当前配置：

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "trace": true,
      "sourceMaps": true,
      "perScriptSourcemaps": "yes",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Firefox Debug",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "skipFiles": [
        "**/node_modules/**"
      ],
      "pathMappings": [
        {
          "url": "http://localhost:3000",
          "path": "${workspaceFolder}"
        }
      ]
    }
  ]
}

字符串

vite.config.js

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { sentryVitePlugin } from "@sentry/vite-plugin";
import { VitePWA } from 'vite-plugin-pwa';
import copy from 'rollup-plugin-copy'
import path from "path";

//import viteTsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => {
  //import svgrPlugin from 'vite-plugin-svgr';
  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '')};
  
  return {
    build: {
      outDir: 'build',
      sourcemap: true
    },
    plugins: [react(), VitePWA({
      injectRegister: null,
      strategies: 'injectManifest',
      filename: 'service-worker.js',
      srcDir: 'src',
      devOptions: {
        enabled: true,
        type: "module",
      },
      injectManifest: {
        maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
      }
    })],
    resolve: {
      alias: {
        src: path.resolve(__dirname, "./src"),
      },
    },
    preview: {
      port: 3000
    },

    server: {
      port: 3000,
      host: "0.0.0.0"
    }
  };
});

型
我打开的相关GH问题：https://github.com/microsoft/vscode-js-debug/issues/1739#issuecomment-1629913799