# PWAs को Debug करना — Progressive Web Apps

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

> Service workers और PWA issues को debug करने के लिए browser tools और techniques का उपयोग करें।

## Debugging Tools

Chrome DevTools का उपयोग करें: Application tab service workers और cache inspection के लिए, Network tab offline simulation के साथ, Console errors के लिए। PWA audit के लिए Lighthouse का उपयोग करें।

## Service worker issues को debug करें

Logging को add करें और service worker state को inspect करने के लिए DevTools का उपयोग करें।

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

त्वरित जाँच

**Quiz:** Chrome DevTools में आप service workers को कहाँ inspect कर सकते हैं?

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

*Answer:* Application tab → Service Workers. Application tab service worker status, cache inspection और lifecycle control provide करता है।