Chrome DevTools控制台仅显示main.js 如何恢复显示实际文件名及行号

• 检查DevTools内置源映射开关
  打开Chrome DevTools，点击右上角齿轮形状的设置按钮，在「Sources」分类下确认 Enable JavaScript source maps 选项已勾选，设置完成后刷新页面试效。
• 检查项目构建工具的sourcemap配置
  该问题90%以上的场景是项目打包阶段未生成合法的sourcemap文件导致，不同工具的配置参考如下：
  • Vite 项目：在vite.config.js/vite.config.ts中配置build.sourcemap: true（生产环境）或server.sourcemap: true（开发环境），开发环境下该配置默认开启，若之前手动关闭可以改回。
  • Webpack 项目：在webpack.config.js中添加配置项devtool: 'eval-cheap-module-source-map'，该配置是开发环境的最优选择，兼顾构建速度和源文件定位精度。
  • Vue CLI 项目：在vue.config.js中新增配置：

    module.exports = {
      configureWebpack: {
        devtool: 'eval-cheap-module-source-map'
      }
    }
    

  • Create React App 项目：开发环境默认开启sourcemap，若执行过eject操作后修改了devtool相关配置，将配置还原即可。
• 排查console方法被二次封装的情况
  如果上述两项配置都正确，需要检查项目内是否有自定义封装console.log的代码、或是引入的第三方日志库重写了原生console方法。这种场景下控制台的调用栈会指向封装代码所在的打包文件，而非实际调用console的业务文件。可以临时注释自定义console封装代码验证，或是在封装函数末尾添加//# sourceURL=custom-console.js标记辅助定位调用栈。

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