Easily inspect, view, and manage your browser's IndexedDB databases with this free, client-side visual tool. Perfect for web developers and debugging.
AI Generation Prompt
Free IndexedDB Database Viewer & Visual Explorer
A high-performance, single-file browser utility designed to visualize and manage IndexedDB databases for the current origin. This tool provides a clean, professional spreadsheet-style interface to inspect browser-side NoSQL data without requiring complex console commands.
Core Features
- Real-time Database Listing: Automatically detects and lists all available IndexedDB databases for the origin.
- Object Store Explorer: A side-navigation menu to quickly switch between different object stores.
- Visual Data Grid: Records are rendered in a clean, scrollable table view. Supports paginated viewing to handle large datasets without browser lag.
- JSON Inspector: A detailed inspection panel that renders record data as formatted JSON for deep-dive debugging.
- Data Management: Built-in actions to 'Delete Record', 'Clear All', and 'Refresh Data' within any selected object store.
- Schema Visualization: View the key path, auto-increment settings, and indices of each store.
UI Layout
- Header: Contains the app title, a 'Refresh' button, and a 'Clear All Storage' safety toggle.
- Sidebar: A two-tier tree navigation list: Database Name > Object Store Name.
- Main Display:
- Top Bar: Quick search filter to narrow down records by key or property value.
- Content Area: A responsive data table displaying records. Includes a 'Preview' button for each record that opens a side-drawer with full JSON details.
- Empty States: Professional, low-illustration feedback screens for when no database or record is selected.
Design System & Aesthetics
- Color Palette: A professional light-mode aesthetic using Slate Grey (text), Azure Blue (primary actions), and White (backgrounds).
- Typography: Inter or a system-stack sans-serif font for maximum readability.
- Animations: Subtle layout shifts using CSS transitions (e.g., side-drawer entry, button hover states). No heavy motion graphics to ensure performance.
- Responsive Design: The sidebar collapses into a mobile-friendly 'hamburger' menu on smaller screens, ensuring the data grid remains readable.
Technical Implementation Constraints
- Single File: All HTML, CSS, and Vanilla JS must reside in one file. No external build processes.
- Zero Persistence: DO NOT use
localStorage,sessionStorage, orIndexedDBto save tool settings. All state must exist in volatile memory. - Sandboxed Compatibility: Ensure the app handles
DOMExceptiongracefully when database access is denied by browser permissions. - Safe UI Actions: All delete operations must trigger a custom, in-app modal confirmation dialog (no browser
confirm()alerts) to prevent accidental data loss. - Performance: Use
document.createDocumentFragmentfor rendering tables to maintain high performance with large record counts.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does this tool access my browser databases?
This tool functions by leveraging the standard browser IndexedDB API to query and list databases associated with the current origin. It runs entirely in your browser memory, ensuring your data never leaves your machine. Because this application is strictly client-side, it respects the Same-Origin Policy. It will only be able to inspect databases belonging to the website or application where this utility is currently loaded or embedded.
Is this tool safe for sensitive debugging data?
Yes, this tool is highly secure because it is entirely client-side. No data is ever sent to a server, stored in a database, or tracked via cookies. All operations happen within the browser's volatile memory. When you close the browser tab, the application's state and any transient references to your data are immediately cleared. It is an ideal tool for local development and debugging environments where data privacy and security are paramount.
Can I modify or delete records using this interface?
Yes, this tool includes CRUD operations to help you manage your IndexedDB stores. You can delete specific entries or clear entire object stores to reset your application state during testing. Please note that these actions are permanent. Since IndexedDB is the actual database your application uses, deleting a record via this utility removes it instantly from the browser's local storage and cannot be undone.
Does this work inside a sandboxed iframe?
This tool is designed to work within iframe environments, provided the parent document allows the necessary permissions. It is optimized for sandboxed environments and does not rely on third-party cookies or persistent storage. By strictly avoiding local storage and session storage, it bypasses common security restrictions often found in sandboxed iframes. It is a lightweight, dependency-free solution for your debugging and development workflow.
