Application Panel

Everything a site keeps on the user's device, and everything that makes it installable or offline-capable, lives in the Application panel. Its sidebar groups Application (Manifest, Service workers, Storage usage), Storage (Local and Session storage, IndexedDB, Cookies, Cache storage), Background services (back/forward cache, background sync, push, notifications) and Frames. To watch the stores fill, serve this page and worker from http://localhost (for example with npx http-server, Other Development Servers); service workers need a secure context, and localhost counts as one.

index.html: writing to four kinds of browser storageHTMLLive

<!doctype html>
<title>Notes</title>
<script>
  localStorage.setItem('theme', 'dark');
  sessionStorage.setItem('draft', 'Buy milk');
  document.cookie = 'visited=yes; max-age=604800; path=/; SameSite=Lax';
  const req = indexedDB.open('notes-db', 1);
  req.onupgradeneeded = () => req.result.createObjectStore('notes', { keyPath: 'id' });
  req.onsuccess = () => req.result.transaction('notes', 'readwrite')
    .objectStore('notes').put({ id: 1, text: 'Learn DevTools' });
  navigator.serviceWorker.register('sw.js');
</script>

sw.js: pre-cache the page, then answer requests cache-firstJavaScript

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open('notes-v1').then((c) => c.addAll(['./'])));
});
self.addEventListener('fetch', (event) => {
  event.respondWith(caches.match(event.request).then((hit) => hit || fetch(event.request)));
});

Load the page and walk the sidebar: Local storage and Session storage are editable key-value tables, Cookies shows visited with its expiry and SameSite flag (plus any HttpOnly cookies scripts cannot read), IndexedDB shows notes-db and its record, and Cache storage shows notes-v1. The Console can summarize the same state:

Querying storage from the Console with top-level awaitJavaScript

const { usage, quota } = await navigator.storage.estimate();
console.log(`Using ${(usage / 1024).toFixed(1)} KiB of ${(quota / 1024 ** 3).toFixed(1)} GiB`);
console.log('Caches:', (await caches.keys()).join(', '));
console.log('Databases:', (await indexedDB.databases()).map((db) => db.name).join(', '));
console.log('Controller:', navigator.serviceWorker.controller?.scriptURL);

Output

Using 3.3 KiB of 10.0 GiB
Caches: notes-v1
Databases: notes-db
Controller: undefined

The quota depends on free disk space. The controller is undefined because a service worker only controls pages loaded after it activates; reload and it reports http://localhost:8080/sw.js. The Service workers pane can force Update on reload, Bypass for network, go Offline, and fire test push and sync events; Storage has Clear site data; and Manifest parses your web app manifest (Web APIs), previews its icons and lists installability errors. Firefox 555 splits these tools between its Storage and Application panels; Safari 10 's Storage tab covers cookies, web storage and IndexedDB.

MENU