Firefox DevTools: Debugging PWAs, Service Workers, and Storage

The Application panel in Firefox DevTools (equivalent to Chrome's Application tab) is the go-to place for debugging Progressive Web Apps, service workers, and storage. Here's what's actually useful.

Opening the Application Panel

Firefox DevTools doesn't have an "Application" tab by default in the same location as Chrome. The equivalent functionality is split across:

• Storage tab — cookies, localStorage, IndexedDB, cache
• Service Workers in the Storage tab (or Debugger → Workers)
• Manifest inspection via right-clicking on the page → "Inspect" and looking for manifest links

Or: type about:devtools-toolbox and use the full toolbox.

Storage Inspector

The Storage tab in DevTools shows all client-side storage for the current origin:

Cookies

• View all cookies: name, value, domain, path, size, HTTP-only, SameSite, Secure flags
• Edit cookie values directly (double-click)
• Delete individual cookies or all cookies for the origin
• Filter by name or domain

Useful for debugging auth: Find the session cookie, check its flags (HttpOnly prevents JS access, Secure requires HTTPS, SameSite=Strict prevents CSRF).

LocalStorage and SessionStorage

• View key-value pairs
• Add, edit, or delete items directly
• Filter by key

Useful for debugging: Manually set or clear localStorage items to test edge cases without running application code.

IndexedDB

• Browse databases and their object stores
• View individual records
• Delete records or entire databases
• Filter records by key or index

Useful for PWA debugging: See what data your PWA has cached offline.

Cache Storage (Service Worker Caches)

• Browse all named caches created by service workers
• View cached requests and responses
• Delete cache entries or entire caches

Useful for PWA debugging: If your site loads stale data, check here — the service worker may be serving old cached responses.

Service Workers

Debugger → Workers (or in some Firefox versions, Storage → Service Workers):

Shows registered service workers for the current origin. You can:

• Inspect the service worker's JavaScript
• Check its scope
• Manually trigger lifecycle events (Update, Unregister)
• View active worker vs waiting worker (if an update is pending)

Common debugging scenarios:

• "My site changes aren't showing" — check if a service worker is serving cached content. Unregister or update it.
• "Offline mode isn't working" — check the service worker's install event and whether it's caching the right resources.

Hard refresh with service worker bypass: Ctrl+Shift+R bypasses the service worker cache for a single load.

Or in DevTools Storage → Cache Storage → delete the relevant cache.

Service Worker Debugger

Set breakpoints in service worker code via the Debugger tab. Service workers run in a separate context from the page — you need to select the worker's source in the Debugger's source list.

Useful for debugging:

• Fetch event interception logic
• Cache strategy implementation
• Background sync handlers
• Push notification handlers

Web App Manifest Inspection

Firefox doesn't have a dedicated Manifest panel like Chrome. To inspect a PWA's manifest:

1. DevTools → Network tab → reload
2. Filter for manifest.json request
3. View the response

Or check it in the Web App Manifest Validator online.

For about:debugging#/runtime/this-firefox: shows installed PWAs and service workers for debugging.

Application Storage Quotas

Firefox limits how much storage each origin can use. The limit is typically 1-10% of available disk space, up to a maximum.

Check remaining quota via JavaScript:

const estimate = await navigator.storage.estimate();
console.log('Quota:', estimate.quota);
console.log('Usage:', estimate.usage);
console.log('Available:', estimate.quota - estimate.usage);

Or: Storage tab → shows quota information for each storage type.

Persistent storage: Sites can request persistent storage that won't be evicted when disk space is low:

const granted = await navigator.storage.persist();
console.log('Persistent:', granted);

Firefox grants this based on user engagement heuristics (sites you use frequently and have bookmarked are more likely to get it).

Debugging "Works in Chrome, Broken in Firefox"

The Storage Inspector is useful for cross-browser PWA debugging. If a PWA works in Chrome but not Firefox:

1. Check IndexedDB: Chrome and Firefox use the same IndexedDB API but different underlying implementations — data format edge cases sometimes cause issues
2. Check service worker registration: The scope and registration path must be correct
3. Check Cache Storage: Make sure fetch event responses are valid Response objects

---

For PWA and service worker development, Firefox's storage and worker debugging tools are solid — comparable to Chrome's. The Storage tab is more straightforward than Chrome's scattered Application panel interface.