Tools & Debugging

Chrome DevTools for PWAs

Chrome DevTools provides dedicated panels for debugging PWAs:

Application Panel

• Manifest: Validate and preview the Web App Manifest
• Service Workers: Inspect SW status, push to debug, unregister, update cycle
• Cache Storage: View and delete cache entries
• IndexedDB: Browse, edit, and delete IndexedDB data
• Storage: View storage usage by origin
• Background Services: Inspect background sync, push messaging, notifications

Debugging Service Workers

// Add logging in Service Worker for easier debugging
const DEBUG = true;

function log(...args) {
  if (DEBUG) {
    console.log('[SW]', ...args);
  }
}

self.addEventListener('install', (event) => {
  log('Installing...');
  // ...
});

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

// To see SW logs:
// 1. Open DevTools > Application > Service Workers
// 2. Click "Inspect" to open the SW console
// 3. All console.log calls from the SW appear here

Testing PWAs

Lighthouse Audits

# Run Lighthouse from CLI
npm install -g lighthouse
lighthouse https://my-pwa.com --view

# Or use in CI
lighthouse https://my-pwa.com \
  --chrome-flags="--headless" \
  --output=json \
  --output-path=./report.json \
  --preset=desktop

Automated Testing

// Using Puppeteer for PWA testing
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Enable DevTools Protocol for SW inspection
  const cdp = await page.target().createCDPSession();
  await cdp.send('ServiceWorker.enable');

  // Listen for SW events
  cdp.on('ServiceWorker.workerRegistrationUpdated', (event) => {
    console.log('Registrations:', event.registrations);
  });

  await page.goto('https://my-pwa.com');

  // Check if SW is active
  const hasSW = await page.evaluate(() => {
    return 'serviceWorker' in navigator;
  });
  console.log('Has Service Worker:', hasSW);

  // Test offline behavior
  await page.setOfflineMode(true);
  await page.reload({ waitUntil: 'networkidle0' });
  const bodyText = await page.evaluate(() => document.body.innerText);
  console.log('Offline content:', bodyText);

  await browser.close();
})();

PWA Checklist