Debugging PWAs

Debugging tools

Use Chrome DevTools: Application tab for service workers and cache inspection, Network tab with offline simulation, Console for errors. Use Lighthouse for PWA audit.

Debug service worker issues

Add logging and use DevTools to inspect service worker state.

// Detailed logging in service worker
self.addEventListener('install', event => {
  console.log('[SW] Install event, version:', CACHE_NAME);
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('[SW] Caching assets...');
      return cache.addAll(urls);
    })
  );
});

self.addEventListener('fetch', event => {
  console.log('[SW] Fetch:', event.request.url);
  // Handle fetch
});

Output:

Service worker lifecycle and fetch events logged for debugging.

Quick check

Quick check: Where in Chrome DevTools can you inspect service workers?

• Sources tab → Scripts
• Console tab → Messages
• Application tab → Service Workers
• Elements tab → Styles