---
title: "How do you debug and inspect data in IndexedDB in Chrome/Firefox?"  
description: "How do you debug and inspect data in IndexedDB in Chrome/Firefox?"  
author: "ICSM Computer"  
published: 2025-07-11  
updated: 2025-07-11  
canonical: https://www.mindstick.com/interview/34332/how-do-you-debug-and-inspect-data-in-indexeddb-in-chrome-firefox  
category: "IndexedDB"  
tags: ["database", "indexeddb"]  
reading_time: 5 minutes  

---

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

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 → **Inspect**
   - Or press `Ctrl+Shift+I` / `Cmd+Option+I`

- **Go to** `Application` **Tab**

   - In top menu: `>>` → Select **Application**
   - On 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 🔍 **filter bar** above the data table
   - Supports field search (e.g., type part of a name)

- **Add/Edit/Delete Entries**

   - Right-click a row → Edit/Delete
   - Click “+” 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 databases
- Type `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 table
   - Click 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()` |

## Answers

### Answer by ICSM Computer

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 → **Inspect**
   - Or press `Ctrl+Shift+I` / `Cmd+Option+I`

- **Go to** `Application` **Tab**

   - In top menu: `>>` → Select **Application**
   - On 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 🔍 **filter bar** above the data table
   - Supports field search (e.g., type part of a name)

- **Add/Edit/Delete Entries**

   - Right-click a row → Edit/Delete
   - Click “+” 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 databases
- Type `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 table
   - Click 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()` |


---

Original Source: https://www.mindstick.com/interview/34332/how-do-you-debug-and-inspect-data-in-indexeddb-in-chrome-firefox

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.