如何让Chrome DevTools通过ServiceWorker请求.js.map源映射文件？

• 确认ServiceWorker作用域覆盖.map文件路径
  注册ServiceWorker时，要保证作用域包含.map文件所在的目录。如果注册时指定了过窄的作用域，会导致无法拦截对应路径下的.map请求。示例注册代码：

  navigator.serviceWorker.register('/sw.js', { scope: '/' })
  

• 验证DevTools「开发者资源」设置生效
  除了勾选「通过网站加载」，还需要：

  • 关闭并重新打开DevTools，确保设置生效
  • 检查「开发者资源」列表中，.map请求的域名与当前ServiceWorker控制的域名完全一致，无跨域情况

• 确保fetch事件捕获所有请求
  在ServiceWorker的fetch处理逻辑中，不要过滤请求类型，可添加日志排查是否捕获到.map请求：

  async function swFetch(ev) {
    console.log('捕获到请求:', ev.request.url); // 查看日志确认是否包含.map请求
    // 现有处理逻辑
    let response = await fetch(ev.request);
    // 针对404的.map请求返回缓存资源
    if (ev.request.url.endsWith('.map') && response.status === 404) {
      response = await caches.match(ev.request) || response;
    }
    return response;
  }
  

• 关闭「绕过ServiceWorker」选项
  打开DevTools的Application面板，找到ServiceWorker区域，确保「Bypass for network」未被勾选——该选项会让所有请求跳过ServiceWorker，包括DevTools发起的.map请求

• 重置ServiceWorker状态
  在Application面板的ServiceWorker部分点击「Unregister」，刷新页面重新注册，清除旧脚本或缓存可能导致的异常

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