使用Vite+React时Dev Tools源码面板组件重复的原因咨询

这是Vite开发模式下的预期行为，不是你的操作问题。

原因如下：

• Vite默认启用了Source Map功能，浏览器DevTools会同时展示两种代码：
  • 一种是Vite实时打包后的编译代码，路径指向localhost；
  • 另一种是通过Source Map映射回的你的原始源码，标注为"from source map"。
• 你新建空白Vite React项目也出现该情况，进一步验证了这是Vite默认配置的正常表现，和你的操作无关。

可选调整方案 #

如果你觉得重复显示冗余，可以修改Vite配置文件（vite.config.js或vite.config.ts）来控制Source Map的生成：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 仅在生产环境生成Source Map，开发环境关闭
  server: {
    sourcemap: false
  },
  build: {
    sourcemap: true
  }
})

注意：开发环境关闭Source Map后，调试时只能查看编译后的代码，不利于定位问题，新手更建议保留默认配置，使用标注"from source map"的原始源码进行调试。

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