DevTools Filesystem无法映射index.html 控制台日志仅指向main.js不关联组件

所有日志仅映射到打包后main.js的核心原因是项目没有生成正确的源文件映射文件（.map），需根据你使用的脚手架调整配置：

• Vue项目
  • vue-cli：在vue.config.js中新增配置项 productionSourceMap: true，开发环境默认开启该配置，若手动修改过需回改
  • Vite：在vite.config.js中新增配置 build: { sourcemap: true }，生产环境需手动开启，开发环境默认生效
• React项目
  • create-react-app：在.env配置文件中新增 GENERATE_SOURCEMAP=true，或者执行打包命令时添加该环境变量
• 原生Webpack项目
  • 在webpack.config.js中将devtool字段配置为eval-source-map（开发环境）或source-map（生产环境），不要使用eval、cheap-source-map这类不支持组件级行号映射的配置

针对index.html无绿点、映射未建立的问题，按以下步骤操作：

• 打开Chrome DevTools设置页（按F1快捷键可直接进入，或点击DevTools右上角三个点选择「Settings」），进入Experiments标签页，确认Enable filesystem workspaces选项已勾选，勾选后重启一次DevTools
• 清除浏览器缓存后刷新页面，进入Sources面板的Page标签页，找到当前页面加载的index.html文件（一般在top -> 你的站点域名目录下）
• 右键该线上index.html文件，选择「Map to file system resource...」，在弹出的文件选择框中选中本地项目对应的index.html文件，确认后重启DevTools并刷新页面，此时index.html会显示绿点，映射生效
• 若仍未生效，检查本地构建产物路径和线上资源加载路径是否匹配：例如本地构建后js文件存放在/dist/js/目录下，线上资源加载路径为https://your-domain/js/xxx.js时，需将本地/dist文件夹添加到工作区，而非整个项目根目录

配置生效后刷新页面触发日志打印，控制台输出的日志会直接关联到.vue/.jsx/.ts等源文件的对应行，不会再仅显示main.js的行号。
注意：生产环境部署时不要将source map文件直接上传到公网服务器，避免源码泄露

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