PWAs को Debug करना

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 का उपयोग करें।

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

त्वरित जाँच

त्वरित जाँच: Chrome DevTools में आप service workers को कहाँ inspect कर सकते हैं?

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