IndexedDB Debug Bar - 🌐 Live Demo

A tool to make IndexedDB development easier Browser devtools for IndexedDB are often limited, making debugging and optimizing IndexedDB painful. IndexedDB Debug Bar bridges this gap by providing debugging capabilities right inside your app. A zero-config panel that lets you browse, query and profile IndexedDB.

🚀 Quick Start

Installation

npm i indexeddb-debug-bar

Usage

import IndexedDBDebugBar from 'indexeddb-debug-bar';

new IndexedDBDebugBar('your-db-name');

Using Dexie.js Instance (Optional)

You can optionally use a Dexie.js instance to view your app’s transaction history and performance. There's also Dexie Cloud support, which lets you debug your cloud app and view activity log for sync operations.

import IndexedDBDebugBar from 'indexeddb-debug-bar';
import Dexie from "dexie";

const db = new Dexie("MyDatabase");
db.version(1).stores({
  items: "++id, name",
});
new IndexedDBDebugBar(db);

Framework Adapters

React - LIVE DEMO

import IndexedDBDebugBar from 'indexeddb-debug-bar/react';

<IndexedDBDebugBar db={'your-db-name'} options={{ ...optional }} />

Vue - LIVE DEMO

<script setup>
import IndexedDBDebugBar from 'indexeddb-debug-bar/vue';
</script>
<template>
  <IndexedDBDebugBar db='your-db-name' :options={{ ...optional }} />
</template>

CDN - LIVE DEMO

<script src="https://cdn.jsdelivr.net/npm/indexeddb-debug-bar@latest/dist/browser/indexeddb-debug-bar-browser.umd.js"></script>
<script>
    new IndexedDBDebugBar();
</script>

Dexie Cloud Demo

https://github.com/user-attachments/assets/664cd39b-2693-4157-9adb-2abc0efc857f

Features

• CRUD Operations with Inline Editing: View, create, update, and delete entries directly from the interface.
• GUI Query Builder: Build and test queries visually.
• Import & Export: Import and export single tables or the entire database.
• Query Performance Insights: Logs showing query durations to help optimize your database interactions.

🌟 Special Dexie.js Features

• Transaction History Logs: Keep track of transactions and roll back effortlessly.
• Dexie.js Cloud Devtools: Enhanced debugging and development experience for Dexie.js Cloud integrations.

API & Options

Component Props

| Prop | Type | Default | Description | | ------------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | | db | Dexie \| string | required | Dexie instance or database name to attach the Debug Bar to | | initialLayout | Layout | { position: 'left', isCollapsed: false, isFullScreen: false, isMinimized: false } | Initial layout settings for the bar |

Layout Shape (for initialLayout)

| Option | Type | Default | Description | | -------------- | ----------------------------------------------- |------------| ---------------------------------------------------------------- | | position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Where to dock the Debug Bar on the viewport | | isCollapsed | boolean | true | If true, only the bar’s header is shown (content is hidden) | | isFullScreen | boolean | false | If true, the bar expands to cover the entire viewport | | isMinimized | boolean | false | If true, the bar is minimized to an icon (click to restore) |

License

MIT

🤝 Contribution

Feel free to contribute to the project by creating issues or pull requests. Contributions, bug reports, and feature requests are welcome!