如何调试安卓手机已安装PWA中的Service Worker？

核心方案：Chrome远程调试（最直接有效） #

• 用USB连接安卓手机和电脑，开启手机的开发者选项和USB调试功能
• 电脑端打开Chrome浏览器，输入地址 chrome://inspect
• 在页面的Devices列表中找到你的已安装PWA应用，点击对应的inspect按钮，弹出调试窗口
• 切换到调试窗口的Application标签，在左侧导航栏找到Service Workers：
  • 这里会显示当前运行的Service Worker实例，点击inspect打开它的专属控制台
  • 你可以直接在控制台查看fetch事件的日志，给fetch代码打断点，实时调试请求逻辑
• 注意：确保手机上的PWA处于前台运行状态，否则Service Worker可能被系统休眠，无法捕获调试信号

无远程调试时的替代方案 #

1. 把调试日志存储到本地 #

修改Service Worker的fetch事件代码，将请求、响应的关键信息存入IndexedDB（Service Worker中推荐用IndexedDB而非localStorage，因为后者同步操作可能阻塞线程），之后在PWA页面中添加调试入口读取并展示日志：

// Service Worker中的日志记录代码
self.addEventListener('fetch', (event) => {
  const logEntry = {
    url: event.request.url,
    method: event.request.method,
    status: null,
    timestamp: new Date().toISOString()
  };

  // 捕获响应状态
  event.respondWith(
    fetch(event.request)
      .then(response => {
        logEntry.status = response.status;
        return response.clone();
      })
      .catch(err => {
        logEntry.error = err.message;
        throw err;
      })
      .finally(() => {
        // 存入IndexedDB
        indexedDB.open('SWDebugLogs', 1).then(db => {
          const tx = db.transaction('logs', 'readwrite');
          tx.objectStore('logs').add(logEntry);
          return tx.complete;
        });
      })
  );
});

// PWA页面中读取日志的示例（可添加一个隐藏按钮触发）
function loadSWLogs() {
  indexedDB.open('SWDebugLogs', 1).then(db => {
    const tx = db.transaction('logs', 'readonly');
    return tx.objectStore('logs').getAll();
  }).then(logs => {
    console.table(logs); // 在页面控制台打印日志
  });
}

2. 强制更新Service Worker并捕获日志 #

• 在电脑端chrome://inspect的调试窗口中，找到Service Workers面板，点击Update按钮强制更新Service Worker
• 确保调试窗口保持打开，新的Service Worker激活后，fetch事件中的console.log()输出会直接显示在控制台中

辅助调试技巧 #

• 在调试窗口的Application标签中勾选Offline，模拟离线环境，验证fetch的缓存 fallback 逻辑是否正常
• 利用Network标签的Preserve log选项，保留请求日志，方便追踪fetch的完整调用链路

内容的提问来源于stack exchange，提问作者Colin R. Turner