Firefox DevTools在Service Worker场景下服务器响应时间显示异常的问题咨询

嗨，这个情况其实是预期行为哦，原因很简单：当Service Worker介入请求处理时，它大概率是直接从本地缓存返回了资源，浏览器根本没有真正向服务器发起请求，所以DevTools的Network和Profiler标签里自然会显示服务器响应时间为0ms。

不过如果确实需要查看真实的服务器响应时间，这里有几个实用的解决办法：

• 临时注销Service Worker：打开Firefox的about:debugging#workers页面，找到当前页面对应的Service Worker，点击“Unregister”按钮注销它，之后刷新页面，请求就会直接走服务器，这时就能看到真实的响应时间了。之后如果需要恢复功能，重新触发Service Worker注册即可。
• 在Service Worker里手动埋点日志：在你的Service Worker代码中，给fetch事件添加时间戳记录。比如在发起真实请求前后分别记录时间，计算差值后打印到控制台，这样就能精准看到服务器的响应耗时。示例代码如下：

  self.addEventListener('fetch', (event) => {
    const requestStartTime = performance.now();
    event.respondWith(
      fetch(event.request)
        .then(response => {
          const requestEndTime = performance.now();
          console.log(`请求 ${event.request.url} 的服务器响应耗时：${requestEndTime - requestStartTime}ms`);
          return response;
        })
    );
  });
  

• 用Performance面板深挖细节：开启Firefox Performance面板的录制功能，完成录制后，在结果里找到Service Worker相关的任务节点，展开后能看到网络请求阶段的详细耗时数据，虽然不是直接在Network标签展示，但也能获取到服务器响应的真实时间。

备注：内容来源于stack exchange，提问作者sylbru