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

The developer tools will load automatically when you start your development server. 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.

INFO

In some environments, the automatic loading of the developer tools may not work. In this case, you can manually load the developer tools by calling loadDeveloperTools() somewhere in your code.

import { loadDeveloperTools } from '@signaldb/devtools';

loadDeveloperTools();

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

TIP

The developer tools will try to resolve names for your collections. You can provide a name for your collection by passing the name property to the options of the collection constructor.

Devtools in production

Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:

import { loadDeveloperTools } from '@signaldb/devtools';

if (process.env.NODE_ENV === 'production') {
  Object.assign(window, {
    loadDeveloperTools
  })
}

Then open the browser console and type loadDeveloperTools() into it.

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.