Chrome/Edge DevTools无法加载已存在的Source Maps，如何批量自动关联？

一、Chrome控制台脚本一键批量设置 #

直接在DevTools的Console面板运行以下脚本，自动给所有已加载的JS文件追加.map后缀的Source Map：

// 遍历所有已加载的脚本资源
document.querySelectorAll('script[src]').forEach(async (script) => {
  const src = script.src;
  if (src && src.endsWith('.js') && !src.includes('.map')) {
    const mapUrl = src + '.map';
    // 利用Chrome调试协议设置Source Map URL
    try {
      await chrome.debugger.sendCommand(
        { tabId: chrome.devtools.inspectedWindow.tabId },
        'Debugger.setSourceMapURL',
        { url: src, sourceMapURL: mapUrl }
      );
    } catch (e) {
      console.log(`无法为 ${src} 设置Source Map:`, e);
    }
  }
});

注意：运行前需确保DevTools已打开，当前页面处于调试状态。若提示权限问题，可先在Chrome扩展页面开启「开发者模式」，确保调试协议可用。

二、自制Chrome扩展自动处理 #

如果需要长期使用，可快速搭建一个极简扩展，自动监听脚本加载并设置Source Map：

1. 创建一个文件夹，新建manifest.json：

{
  "name": "自动加载Source Map",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["debugger", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icon.png" // 可选，找一张16x16的图片作为图标即可
    }
  }
}

2. 同文件夹新建background.js：

chrome.action.onClicked.addListener((tab) => {
  chrome.debugger.attach({ tabId: tab.id }, '1.3', () => {
    chrome.debugger.sendCommand({ tabId: tab.id }, 'Debugger.enable', () => {
      chrome.debugger.onEvent.addListener((_, method, params) => {
        if (method === 'Debugger.scriptParsed') {
          const scriptUrl = params.url;
          if (scriptUrl && scriptUrl.endsWith('.js') && !scriptUrl.endsWith('.map')) {
            const mapUrl = scriptUrl + '.map';
            chrome.debugger.sendCommand(
              { tabId: tab.id },
              'Debugger.setSourceMapURL',
              { url: scriptUrl, sourceMapURL: mapUrl }
            );
          }
        }
      });
    });
  });
});

3. 打开Chrome扩展页面（chrome://extensions/），开启「开发者模式」，点击「加载已解压的扩展程序」，选择刚才的文件夹即可。使用时点击浏览器右上角的扩展图标，就能自动给当前页面的所有JS文件加载对应.map的Source Map。

三、若能控制项目代码：修改Webpack配置 #

如果这是你维护的项目，最根本的解决方法是修改Webpack配置，让它自动生成并关联Source Map：
在webpack.config.js中添加/修改以下配置：

module.exports = {
  // 生成完整的Source Map（可根据需求选择cheap-module-source-map等轻量模式）
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    // 指定Source Map文件的命名规则
    sourceMapFilename: '[name].js.map'
  }
};

重新构建项目后，Webpack会自动在每个JS文件末尾添加//# sourceMappingURL=xxx.js.map注释，DevTools就能自动识别并加载Source Map，无需手动操作。

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