Firefox DevTools Storage Inspector: localStorage, IndexedDB, Cookies, and Cache

Modern web apps use multiple browser storage mechanisms. Firefox DevTools makes it easy to inspect and debug all of them from one place. Here's the complete guide.

Storage Tools in Firefox DevTools

The Application panel (F12 → Application tab — may need enabling) shows:

• localStorage and sessionStorage
• IndexedDB databases and object stores
• Cookies for the current origin
• Cache Storage (Service Worker cache)

Each has a viewer and editor.

localStorage and sessionStorage

localStorage: Persists indefinitely until cleared
sessionStorage: Cleared when the browser tab is closed

In the Application panel → Storage → Local Storage / Session Storage → select origin.

Viewing data:

• Table shows all key-value pairs
• Click any row to see the value (with JSON formatting for JSON strings)
• Filter by key name

Editing data:

• Double-click a value to edit it
• Changes apply immediately to the page's storage
• Useful for testing state without triggering actions that would set the data normally

Deleting entries:

• Select a row → Delete key
• Or use the delete icon

From the Console:

// Direct access to localStorage
localStorage.setItem('debugFlag', 'true');
localStorage.getItem('user-preferences');
localStorage.removeItem('old-key');
localStorage.clear(); // Clears everything

// See all keys
Object.keys(localStorage).forEach(k => console.log(k, localStorage.getItem(k)));

Cookies

Application panel → Cookies → select origin.

Shows all cookies with:

• Name
• Value
• Domain
• Path
• Expires / Max-Age
• Size
• HttpOnly (not accessible via JavaScript)
• Secure (HTTPS only)
• SameSite (None/Lax/Strict)
• Partition Key (with Total Cookie Protection)

Editing cookies: Double-click to edit. Create new cookies with the + button.

Useful for testing:

• Delete session cookie → simulate logout
• Modify expires → test cookie expiry behavior
• Toggle HttpOnly → for quickly testing JS cookie access (development only)

From Console:

// Read cookies (non-HttpOnly only)
document.cookie;

// Set a cookie
document.cookie = "name=value; path=/; expires=" + new Date(Date.now() + 86400000).toUTCString();

// Delete a cookie (set expiry to past)
document.cookie = "name=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Note: HttpOnly cookies are not accessible via document.cookie.

IndexedDB

Application panel → IndexedDB → select origin and database.

For each database:

• Name and version
• Object stores (tables)
• Indexes

Click an object store → see stored records with key and value columns.

Practical use: Debug offline data, inspect the state of your app's client-side database without writing test queries.

From Console:

// Open database
const request = indexedDB.open('my-db', 1);
request.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction(['users'], 'readonly');
  const store = tx.objectStore('users');
  store.getAll().onsuccess = (e) => console.log(e.target.result);
};

// List all databases (if supported)
indexedDB.databases().then(dbs => console.log(dbs));

Cache Storage (Service Worker)

Application panel → Cache Storage → select origin.

Shows all named caches created by your service worker.

For each cache:

• List of cached requests (URLs)
• Response status and headers
• Cached response body

Debugging:

• Verify which URLs are cached
• Check if stale resources are cached after an update
• Delete specific cached entries to force network fetch

From Console (Service Worker context):

// Run in Service Worker console (Inspect from about:debugging)
caches.keys().then(names => console.log('Cache names:', names));

caches.open('v1').then(cache => 
  cache.keys().then(keys => 
    keys.forEach(req => console.log(req.url))
  )
);

Web SQL (Deprecated)

Firefox never supported Web SQL (it was rejected by Mozilla and the standard was abandoned). If you see Web SQL used, it's a legacy Chrome-specific pattern.

Origin Private File System (OPFS)

New Web Storage API available in Firefox 111+. Application panel doesn't have dedicated OPFS viewer yet (as of 2024). Inspect via Console:

const root = await navigator.storage.getDirectory();
for await (const [name, handle] of root.entries()) {
  console.log(name, handle.kind);
}

Storage Quota

Storage quota determines how much a site can store:

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

Firefox uses a per-origin quota system. Sites can request persistent storage (protected from automatic eviction) via:

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

Check about:storage-access for storage access status per origin.

Privacy Considerations for Storage

Firefox's Total Cookie Protection partitions storage by top-level site. In the Application panel, the "Partition Key" column shows which partition a cookie belongs to.

This means: if you embed iframe from widget.com on site-a.com, cookies set by the iframe are in the site-a.com partition — not shared with widget.com's first-party partition.

For developers building embedded widgets: use document.requestStorageAccess() to request first-party storage access when needed for legitimate use cases.

Clearing Storage

Application panel → Storage → click "Clear Site Data" to clear all storage for the origin (localStorage, sessionStorage, cookies, IndexedDB, Cache).

Or selectively: right-click any item and delete.

From the address bar info button → Clear Data for Site — clears everything for that domain including cookies from across sessions.

This is the nuclear option when you need a completely fresh state for testing.