Developer Tools

BETA

The developer tools are currently in beta and may not be fully functional or stable. Please report any issues you encounter by opening an issue on GitHub.

SignalDB provides a set of developer tools to help you debug and inspect the state of your SignalDB instance at runtime.

To get started, add the @signaldb/devtools package to your devDependencies of your project.

npm install --save-dev @signaldb/devtools

Usage

To load the developer tools, you need to import @signaldb/devtools somewhere in your frontend code. Make sure that it doesn't get imported in production builds — see Devtools in production.

Now you should see the SignalDB icon in the bottom left corner of your screen. You can open the developer tools by clicking on the icon or by pressing Ctrl + Shift + S.

Importing the package is all there is to it — the import itself loads the tools, there is nothing to call:

import '@signaldb/devtools'

The developer tools will open and you should the following tabs.

TIP

The developer tools will try to resolve names for your collections. Give a collection its name through the constructor: new Collection('posts', dataAdapter).

WARNING

Importing the package calls Collection.enableDebugMode(), which since v2 also switches on reportLargeQueries() at 500 rows. Expect console output about live queries holding more than that — it is pointing at something worth looking at, see troubleshooting.

Devtools in production

The package does not exclude itself from production builds. If it is imported there, it loads the tools, switches on debug mode for every collection and logs a warning to the console. Keep it out of production bundles by importing it only in development — with Vite, for instance:

if (import.meta.env.DEV) {
  void import('@signaldb/devtools')
}

If you want the tools available in production anyway, import the package lazily behind something you control — a query parameter, a feature flag — so that neither the tools nor debug mode load for ordinary visitors:

if (new URLSearchParams(location.search).has('signaldb-devtools')) {
  void import('@signaldb/devtools')
}

Data

The data tab shows the current state of all of your SignalDB collections. You can inspect the collections, documents and even edit the data directly in the developer tools.

Queries

The queries tab shows all of the queries that have been executed on your SignalDB instance. Tracking all queries can decrease performance. You can deactivate tracking of queries by unticking the checkbox right next to the tab name.

Mutations

The mutations tab shows all of the mutations that have been executed on your SignalDB instance. Tracking all mutations can decrease performance. You can deactivate tracking of mutations by unticking the checkbox right next to the tab name.

Performance

The performance tab shows the time measurements of your queries of your SignalDB instance. You can see how long it took to execute queries. Tracking performance can decrease performance. You can deactivate tracking of performance by unticking the checkbox right next to the tab name.

Settings

The settings tab allows you to configure the developer tools. You can change if the button should be shown (you can still open the developer tools with Ctrl + Shift + S) and what should be shown as a badge on the button. You can choose between collection count, query count or disable the badge.

TIP

Also make sure to check out the examples listed in the sidebar. We've included the developer tools there as well.