Storage Inspector

A small, framework-free Manifest V3 browser extension that adds a Storage Inspector panel to Chrome / Edge DevTools. It gives you a single, unified view of everything a page has stored in the browser — localStorage, sessionStorage, IndexedDB and the Cache API — alongside the origin's overall quota usage and an at-a-glance eviction-risk indicator.

No build step, no dependencies, no network calls. Load it unpacked and open a new DevTools tab.

Why

Browsers spread storage across four very different APIs, each with its own DevTools view. When you are chasing a quota error, a bloated cache, or an origin that keeps getting evicted, jumping between panels makes it hard to see the whole picture. Storage Inspector collects all of it in one place and adds the numbers those panels don't surface: per-key byte sizes, per-store extrapolated sizes, total usage vs. quota, and a pressure indicator.

Features

• Unified snapshot across localStorage, sessionStorage, IndexedDB and the Cache API for the inspected page's origin.
• Byte sizes everywhere — per key (Web Storage), per object store (IndexedDB, sampled), and per cache (Cache API, sampled), with human-readable formatting.
• Quota & pressure — reads navigator.storage.estimate() and renders a usage-vs-quota pressure bar with healthy / elevated / critical states.
• Eviction-risk indicator derived from the usage ratio, so you know when an origin is close to the limit where the browser may start evicting data.
• Stale-entry detection — flags oversized Web Storage entries (large) and, when a value is JSON with a timestamp-like field, entries that look old (stale).
• Sortable tables — click any numeric or name column header to sort (also keyboard-operable).
• Search / filter box that narrows keys, object stores and cache names across every section at once.
• Copy-to-clipboard for any Web Storage value.
• Collapsible sections, empty states, and automatic refresh on page navigation.
• Light / dark aware via prefers-color-scheme, accessible labels and focus styles, responsive layout that works in the narrow DevTools drawer.

Screenshots

No image files are bundled (to keep the repo lightweight and free of binaries), so here is what you'll see:

• Summary header — a pressure bar spanning the width of the panel, coloured green / amber / red, with the reported usage and quota beside it, followed by a row of stat tiles: Reported usage, Inspected total, Web Storage, IndexedDB and Cache API.
• Sections — one collapsible section per storage type. Local/Session Storage show a table of Key · Size · Length · Flags · Copy. IndexedDB lists each database and, under it, a table of Object store · Records · Approx. size · Key path · Indexes. Cache Storage lists each cache with Cache · Requests · Approx. size.
• Footer — a status line ("Updated 14:03:12") and a reminder that all analysis is local.

Installation (unpacked extension)

Chrome or Edge, no packaging required:

1. Download or clone this repository to a local folder.
2. Open the extensions page — type chrome://extensions in Chrome (or edge://extensions in Edge) into the address bar.
3. Turn on Developer mode (top-right toggle).
4. Click Load unpacked.
5. Select the storage-inspector folder (the one containing manifest.json).

The extension has no toolbar button — it only adds a DevTools panel.

Opening the panel

1. Open DevTools on any normal http(s) page — press F12, or right-click the page and choose Inspect.
2. Click the Storage Inspector tab in the DevTools toolbar (it may be behind the » overflow menu).
3. The panel loads a snapshot automatically. Use Refresh to re-scan after you change the page's storage.

Tip: DevTools panels only inspect the tab they are attached to, and only normal web pages. Internal pages such as chrome://… or other extensions' pages cannot be inspected.

How it works

The panel never has direct access to the page's storage objects. Instead it serialises a self-contained collector function and runs it inside the inspected page through chrome.devtools.inspectedWindow.eval. Because that API does not await promises, the collector stashes its result on a temporary window global and the panel polls until the asynchronous work is done, then reads back a plain JSON snapshot.

The collector is defensive: each storage type is wrapped in its own try/catch, so if one API is unavailable or throws, the rest of the snapshot still comes back.

How sizes are computed

• Web Storage — for every key, both the key and value are measured as UTF-8 byte lengths (TextEncoder) and summed. This is an accurate serialized size; note that engines internally store strings as UTF-16, so on-disk cost can differ.
• IndexedDB — up to 50 records per object store are read via a cursor and sized (Blob.size / ArrayBuffer.byteLength / JSON.stringify length as appropriate). The sampled average is multiplied by the store's exact record count to approximate the total. Approximate sizes are shown with a ~.
• Cache API — up to 50 responses per cache are inspected; each response uses its Content-Length header when present, otherwise its body is read to measure the byte length. The sample is extrapolated across the request count.
• Quota / usage — taken directly from navigator.storage.estimate().

Sampling keeps the scan fast on large stores; that is why IndexedDB and Cache totals are labelled approximate.

How pressure is computed

Pressure is the ratio usage / quota from navigator.storage.estimate():

• Healthy — below 70%
• Elevated — 70% to 90%
• Critical — 90% or above (writes may start failing and the origin becomes a candidate for eviction)

Permissions

Storage Inspector requests no permissions at all. There is no permissions array in manifest.json, no host permissions, and no content scripts.

It relies solely on the DevTools APIs, which are available to any devtools_page while DevTools is open on a tab:

• chrome.devtools.panels — to register the panel.
• chrome.devtools.inspectedWindow.eval — to run the read-only collector in the inspected page.
• chrome.devtools.network.onNavigated — to refresh automatically on navigation.

This is the least-privilege design: nothing the extension can do reaches beyond the tab whose DevTools you explicitly opened.

Privacy

All analysis happens locally, inside your browser, while DevTools is open. The extension makes no network requests and sends no data anywhere. Values are only read when you explicitly use Copy, and then only to your system clipboard. Nothing is stored by the extension between sessions.

Browser support

• Chrome / Edge (Chromium) — primary target. Requires Chromium 102+ (minimum_chrome_version in the manifest). indexedDB.databases(), navigator.storage.estimate() and the Cache API are all available.
• Firefox — the DevTools panel model differs (devtools_page is supported, but the WebExtensions DevTools APIs and MV3 details vary), and Firefox does not implement indexedDB.databases(), so IndexedDB databases cannot be enumerated automatically. The panel degrades gracefully and shows a note in that case. Web Storage, Cache API and quota estimates still work where the engine supports them.
• Safari — not supported; it uses a different extension and DevTools model.

FAQ

Why are IndexedDB and Cache sizes marked with a ~? They are sampled (up to 50 records/responses each) and extrapolated, so they are estimates. Exact totals would require reading every record, which is slow on large stores.

The IndexedDB section says it can't list databases. That browser doesn't support indexedDB.databases() (notably Firefox). There is no standard way to enumerate databases without it.

Why is "Inspected total" different from "Reported usage"? "Reported usage" comes from the browser's own accounting (navigator.storage.estimate()) and includes overhead and other buckets; "Inspected total" is the sum of the (partly sampled) stores shown in the panel. They rarely match exactly.

Nothing shows up / I get an error. Make sure DevTools is open on a normal http(s) page (not a chrome:// or extension page), then press Refresh.

Does it modify my storage? No. The collector only reads (counts, sizes, read-only transactions). The single write action is copying a value to your clipboard, which you trigger explicitly.

Contributing

Issues and pull requests are welcome. The project is intentionally dependency- and build-free:

• Keep it vanilla — plain HTML, CSS and JavaScript, no frameworks or bundlers, so it always loads unpacked.
• Keep the collector self-contained (it is stringified and run in another realm) and defensive (guard every storage type).
• Preserve the least-privilege stance — avoid adding permissions unless there is no alternative, and document any that become necessary.
• Test against a page that actually uses all four storage types.

Further reading

Background material on the concepts this tool surfaces:

• Storage Quotas & Eviction Policies — how browsers allocate quota and decide what to evict.
• Understanding the Web Storage APIs — the mechanics of localStorage and sessionStorage.
• Browser storage limits across Chrome, Firefox and Safari — how much you actually get, per engine.
• Debugging storage eviction in progressive web apps — practical strategies for diagnosing eviction.

Maintained by the team behind Browser Storage & Offline-First State Persistence.

License

MIT © 2026 browser-storage.com