Chrome调试时Webpack Source Maps工作异常，寻求解决方案

这种source map映射混乱的问题我之前也碰到过好几次，大多是配置或者缓存的锅，给你几个针对性的排查方向：

• 检查Webpack的devtool配置
  不同的devtool选项对调试精度影响极大。如果当前用的是eval系列（比如eval-cheap-module-source-map），这类选项虽然构建快，但有时候会出现行号映射偏移、变量悬停异常的问题。建议换成更精准的选项试试：

  module.exports = {
    // ...其他配置项
    devtool: 'source-map' // 生成独立的.map文件，映射精度最高
    // 或者试试'inline-cheap-module-source-map'，兼顾速度和基本调试需求
  };
  

  改完配置后记得重启Webpack dev server，让新的source map生效。

• 清理浏览器和Webpack缓存
  旧的source map缓存是重灾区！先试试强制刷新页面：Windows/Linux按Ctrl+Shift+R，Mac按Cmd+Shift+R。或者打开Chrome开发者工具，在Network面板勾选「Disable cache」，再重新加载页面。另外，Webpack的缓存也可以清一下，删除项目根目录下的node_modules/.cache文件夹，或者直接重启dev server。

• 校验React项目的Babel配置
  如果你用的是React，Babel的配置可能和source map冲突：

  1. 确保Babel开启了source map生成：

     {
       "presets": [["@babel/preset-react", { "development": true }]],
       "sourceMaps": true
     }
     

  2. 暂时禁用babel-plugin-transform-react-jsx-source这类插件，它有时候会干扰Webpack的source map映射逻辑。

• 检查Chrome调试工具的设置
  打开Chrome开发者工具的设置（右上角三个点→Settings），在「Sources」分类下：

  • 确认「Enable JavaScript source maps」和「Enable CSS source maps」是勾选状态
  • 检查「Ignore list」里有没有不小心添加了你的业务代码规则，导致调试时跳过了正确的行

• 排查代码分割/动态导入的影响
  如果项目用了Webpack的代码分割（比如import()动态导入组件），部分chunk的source map可能映射错误。可以先临时禁用代码分割，看看问题是否消失，再针对性调整chunk的source map配置。

如果以上方法都没解决，可以试试降级Webpack到稳定版本（比如最近的大版本更新可能引入了source map的bug），或者检查有没有其他Webpack插件（比如压缩类插件）影响了source map的生成。

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