Chrome/Edge DevTools加载Rollup生成的Source Map延迟或失败求助

我之前也碰到过类似的Rollup Source Map加载不稳定的问题，折腾了好一阵才摸出几个靠谱的解决方向，分享给你：

1. 核对Rollup的Source Map核心配置 #

• 先确保Rollup配置里的sourcemap选项设置明确，别用模糊的取值。比如直接设为true（生成外部map文件）或者'inline'（把map嵌入到bundle里）：

  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm',
      sourcemap: true // 试试切换成'inline'看是否稳定
    }
  };
  

• 如果用了代码压缩插件（比如@rollup/plugin-terser），一定要给插件也开启Source Map支持——不然压缩后的代码和外部map文件不匹配，浏览器可能直接放弃加载：

  import terser from '@rollup/plugin-terser';
  
  export default {
    // ...其他配置
    plugins: [
      terser({
        sourcemap: true // 这个选项必须开，否则压缩会破坏map关联
      })
    ]
  };
  

2. 调整DevTools的Source Map相关设置 #

• 打开DevTools右上角的齿轮图标进入Settings，在Sources板块里：
  • 确认Enable JavaScript source maps和Enable CSS source maps是勾选状态
  • 试试关掉Automatically load source maps，然后手动在Sources面板里右键bundle.js，选择Add source map，手动指定map文件的路径，看是否能稳定加载
  • 另外，在Network面板勾选Disable cache，有时候浏览器缓存了旧的map文件，会导致加载异常

3. 检查开发服务器的MIME类型配置（如果用了的话） #

• 如果你用rollup-plugin-serve或其他开发服务器，要确保服务器能正确返回.map文件的MIME类型（应该是application/json）。有些服务器默认不识别.map后缀，会返回错误的类型，导致浏览器无法解析：

  import serve from 'rollup-plugin-serve';
  
  export default {
    // ...其他配置
    plugins: [
      serve({
        contentBase: 'dist',
        mimeTypes: {
          '.map': 'application/json'
        }
      })
    ]
  };
  

4. 排查文件路径与命名一致性 #

• 检查bundle.js末尾的//# sourceMappingURL=bundle.js.map注释，确保路径和实际map文件的位置完全一致。如果是相对路径，要确认bundle.js和map文件在同一目录下
• 注意文件名的大小写（比如实际是Bundle.js.map但注释里写的是bundle.js.map）、特殊字符，这些都可能导致浏览器找不到文件

5. 更新工具版本排查兼容性 #

• 老版本的Rollup、Chrome/Edge DevTools可能存在兼容性bug。试试把Rollup升级到最新稳定版，同时把浏览器也更到最新版本——很多这类奇怪的加载问题，都是版本不兼容导致的

6. 临时应急方案：用内联Source Map #

如果外部map文件加载一直不稳定，可以临时把Rollup的sourcemap设为'inline'，这样Source Map会直接嵌入到bundle.js里，不需要浏览器单独请求。虽然会增大文件体积，但调试时的稳定性会高很多，适合紧急开发场景

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