What are the common debugging methods and tools for Service Worker?

Service Worker Debugging Methods and Tools

Service Worker runs in the browser background, making debugging relatively complex. Mastering the correct debugging methods and tools is crucial for development.

Chrome DevTools Debugging

1. Application Panel

Chrome DevTools' Application panel is the main tool for debugging Service Worker.

shell
DevTools → Application → Service Workers

Main Features:

• View registered Service Workers
• View current status (activated, installing, waiting, etc.)
• Manually trigger updates (Update)
• Unregister Service Worker (Unregister)
• Simulate offline environment (Offline checkbox)
• Bypass network (Bypass for network)

2. Network Panel Debugging

javascript
// View requests intercepted by Service Worker
// DevTools → Network → View Size column
// (from ServiceWorker) means returned from cache
// (from disk cache) means returned from disk cache
// (from memory cache) means returned from memory cache

3. Console Panel

javascript
// Service Worker console.log appears in DevTools Console
// Note: Check "Preserve log" to keep logs before refresh

// View current Service Worker status
navigator.serviceWorker.ready.then(registration => {
  console.log('Service Worker status:', registration);
});

Common Debugging Techniques

1. Force Update Service Worker

javascript
// Method 1: Manual update
navigator.serviceWorker.getRegistration().then(reg => {
  reg.update();
});

// Method 2: Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
// Bypasses Service Worker, installs new version

// Method 3: Click Update in DevTools Application panel

2. View Cache Contents

javascript
// View all caches
async function inspectCaches() {
  const cacheNames = await caches.keys();
  console.log('Cache list:', cacheNames);
  
  for (const name of cacheNames) {
    const cache = await caches.open(name);
    const requests = await cache.keys();
    console.log(`Cache ${name} contents:`, requests.map(r => r.url));
  }
}

inspectCaches();

3. Clear Cache

javascript
// Clear all caches
async function clearAllCaches() {
  const cacheNames = await caches.keys();
  await Promise.all(cacheNames.map(name => caches.delete(name)));
  console.log('All caches cleared');
}

// Clear specific cache
async function clearCache(cacheName) {
  await caches.delete(cacheName);
  console.log(`Cache ${cacheName} cleared`);
}

4. Simulate Offline Environment

javascript
// Method 1: DevTools Network panel
// Select "Offline" or set custom network conditions

// Method 2: Detect in code
window.addEventListener('offline', () => {
  console.log('Entered offline mode');
});

// Method 3: Manually trigger offline state
// navigator.connection can view network status
console.log('Network status:', navigator.connection);

5. Debug Fetch Events

javascript
// Add detailed logging in sw.js
self.addEventListener('fetch', event => {
  console.log('Fetch request:', {
    url: event.request.url,
    method: event.request.method,
    mode: event.request.mode,
    destination: event.request.destination
  });
  
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        console.log('Cache hit:', event.request.url);
        return response;
      }
      
      console.log('Cache miss, fetching from network:', event.request.url);
      return fetch(event.request);
    })
  );
});

Advanced Debugging Techniques

1. Use Chrome's Service Worker Internal Page

shell
chrome://serviceworker-internals/

Can view detailed information about all Service Workers, including:

• Registration info
• Console logs
• Network requests
• Storage usage

2. Use Workbox Debugging

If using Workbox, enable detailed logging:

javascript
// Enable Workbox debugging
workbox.setConfig({
  debug: true
});

// View Workbox logs
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

3. Breakpoint Debugging

javascript
// Set debugger in Service Worker code
self.addEventListener('fetch', event => {
  debugger; // DevTools will pause here
  
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

4. Use console.table to View Cache

javascript
async function logCacheContents() {
  const cache = await caches.open('my-cache');
  const requests = await cache.keys();
  
  const tableData = await Promise.all(
    requests.map(async request => {
      const response = await cache.match(request);
      return {
        URL: request.url,
        Status: response.status,
        Type: response.headers.get('content-type'),
        Size: response.headers.get('content-length')
      };
    })
  );
  
  console.table(tableData);
}

Common Problem Troubleshooting

1. Service Worker Not Registered

javascript
// Check browser support
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('Registration successful:', reg))
    .catch(err => console.error('Registration failed:', err));
} else {
  console.error('Browser does not support Service Worker');
}

2. HTTPS Issues

javascript
// Check if HTTPS (except localhost)
if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
  console.error('Service Worker requires HTTPS environment');
}

3. Cache Not Updating

javascript
// Ensure cache name changes when updating Service Worker
const CACHE_NAME = 'my-app-v2'; // Update version number

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    })
  );
});

4. Cross-Origin Resource Caching Issues

javascript
// CORS resources need special handling
self.addEventListener('fetch', event => {
  if (event.request.mode === 'cors') {
    // Cross-origin requests use no-cors mode for caching
    event.respondWith(
      fetch(event.request, { mode: 'no-cors' })
        .then(response => {
          return caches.open('cors-cache').then(cache => {
            cache.put(event.request, response.clone());
            return response;
          });
        })
    );
  }
});

Debugging Checklist

Development Stage Checklist

• Service Worker successfully registered
• Install event triggers normally
• Static resources cached correctly
• Fetch events intercepted correctly
• Caching strategies work as expected
• Activate event cleans old caches
• Offline functionality works normally

Production Environment Checklist

• Service Worker file not cached
• Cache version control correct
• Update mechanism works normally
• Error handling complete
• Fallback solution effective

Recommended Tools

Tool	Purpose
Chrome DevTools	Main debugging tool
Workbox	Service Worker library with debugging features
Lighthouse	PWA audit and performance analysis
PWA Builder	Validate PWA configuration
Web Server for Chrome	Local HTTPS testing

Debugging Best Practices

1. Use Chrome DevTools: Fully utilize Application panel
2. Add Detailed Logging: Use different log levels for development and production
3. Version Control: Change cache name with each update
4. Test Offline: Regularly test offline functionality
5. Monitor Errors: Use error tracking services to monitor Service Worker errors