Signals Devtool

Signals Devtool is a Chrome extension that helps developers inspect and debug signals in their web applications. It provides a convenient way to monitor and visualize the state of signals in real-time.

Set up the Signals Devtool extension provider in your codebase to see real-time signal state changes.

Compatibility

The signals devtool currently supports following libraries, if you are using one of them to implement signals on your application the signals devtool will work.

1. @preact/signals
2. @preact/signals-react
3. @preact/signals-core

Key features:

• Real-time monitoring of signals
• Diff view to compare signal states
• Recording and playback of signal changes

Installation

Install the signals-devtool chrome extension first.

Implementation

We have given all the supported formats below, use the right one which suites your case.

For @preact-signals-react

If you are using @preact-signals-react on your react application use the below template to init the signals devtool.

import { useEffect } from "react";
import { signal, effect } from "@preact/signals-react";
import signalsDevtool from "signals-devtool-provider";

const count = signal(0);
const name = signal("john");

const signals = {
  count,
  name,
};

signalsDevtool.init({ signals, effect });

function App() {
  // your code goes here
}

For @preact-signals

If you are using @preact-signals on your preact application use the below template to init the signals devtool.

import { useEffect } from "preact/hooks";
import { signal, effect } from "@preact/signals";
import signalsDevtool from "signals-devtool-provider";

const count = signal(0);
const name = signal("john");

const signals = {
  count,
  name,
};

signalsDevtool.init({ signals, effect });

function App() {
  // your code goes here
}