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: andgt;andgt; → 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 and Filter
Use the 🔍 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
🛠 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()

interview

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

ICSM Computer

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

Liked By

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()`