# Debugging PWAs — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-debugging

> Use browser tools and techniques to debug service workers and PWA issues.

## 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.

```javascript
// 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

**Quiz:** Where in Chrome DevTools can you inspect service workers?

- [x] Application tab → Service Workers
- [ ] Sources tab → Scripts
- [ ] Console tab → Messages

*Answer:* Application tab → Service Workers. The Application tab provides service worker status, cache inspection, and lifecycle control.