How do you debug and inspect data in IndexedDB in Chrome/Firefox?

Question

ICSM Computer · Answer

To debug and inspect data in IndexedDB in Chrome or Firefox, use the built-in developer tools. Here's a step-by-step guide for both browsers: In Chrome DevTools Step-by-Step: Open DevTools Right-click → InspectOr press Ctrl+Shift+I / Cmd+Option+I Go to Application Tab In top menu: &gt;&gt; → Select ApplicationOn left sidebar: expand IndexedDB Expand Your Database Click your database name (e.g., SyncAppDB)Expand to see object stores (tables) View Object Store Data Click on an object store (e.g., items)Records will appear in a table (Name, Key, Value) Search & Filter Use the &#128269; filter bar above the data tableSupports field search (e.g., type part of a name) Add/Edit/Delete Entries Right-click a row → Edit/DeleteClick “+” icon to manually insert records Clear Object Store Right-click the store → Clear to delete all records &#128736; Bonus: Live Debugging Use breakpoints in your JavaScript code to inspect db.items.add(), etc.Type indexedDB.databases() in the Console to list all databasesType await db.items.toArray() (if using Dexie) in the console to inspect In Firefox DevTools Step-by-Step: Open DevTools F12 or Ctrl+Shift+I Go to Storage Tab On left panel: Expand IndexedDB Select Your Database Expand database → Select object store (e.g., items) View Data Records will appear in a tableClick a record to inspect its full contents in a side panel Edit/Delete Click a row, then use buttons to update or delete Filter Filter bar lets you search records (Firefox supports better filter UX than Chrome) Pro Tips Tip Usage indexedDB.deleteDatabase('DB_NAME') Deletes the entire DB from console Use Dexie’s db.open() logs Shows info in console during setup Disable cache (Network tab) Ensures DB loads from fresh code Use console.table(await db.items.toArray()) View table format in console Install IDBExplorer browser extension Adds better IndexedDB GUI (optional) Summary Browser Tab Feature Chrome Application → IndexedDB Inspect, edit, clear Firefox Storage → IndexedDB View, filter, edit Both Console Debugging await db.store.toArray()

How do you debug and inspect data in IndexedDB in Chrome/Firefox?

1 Answers

In Chrome DevTools

Step-by-Step:

🛠 Bonus: Live Debugging

In Firefox DevTools

Step-by-Step:

Pro Tips

Summary

Tip	Usage
`indexedDB.deleteDatabase('DB_NAME')`	Deletes the entire DB from console
Use Dexie’s `db.open()` logs	Shows info in console during setup
Disable cache (`Network` tab)	Ensures DB loads from fresh code
Use `console.table(await db.items.toArray())`	View table format in console
Install IDBExplorer browser extension	Adds better IndexedDB GUI (optional)

Browser	Tab	Feature
Chrome	`Application → IndexedDB`	Inspect, edit, clear
Firefox	`Storage → IndexedDB`	View, filter, edit
Both	Console Debugging	`await db.store.toArray()`

interview

How do you debug and inspect data in IndexedDB in Chrome/Firefox?

Can you answer this question?

1 Answers

In Chrome DevTools

Step-by-Step:

🛠 Bonus: Live Debugging

In Firefox DevTools

Step-by-Step:

Pro Tips

Summary