deffector

English

Русский

English

Русский

Appearance

Star

deffectorDevTools for effector

Every user action as one transaction. Time travel, state injection, and traces that replay a teammate’s bug.

Quick start
Add to Chrome
Add to Firefox
What is deffector?
Live demo
deffector

One action, one transaction

An event and everything it caused in one row of the Log, with the step tree in effector’s own order — filters that returned false, double recomputations, stale reads, calls outside of a scope.

Log

Time travel

Jump to any transaction. With fork() the app renders a forked copy of that moment and the present is untouched; the page is covered so a click cannot change the past.

Time travel

Your own state in any store

Set a value live (logged like allSettled) or silently in a new forked scope, save presets of a whole form, paste a { sid → value } snapshot and see the diff first.

Stores

Effects under control

A network-panel style waterfall with out-of-order responses highlighted. Keep a call pending, resolve or reject it with a value, add latency or run your own handler.

Effects

Traces that reproduce bugs

Export the initial state, external calls and effect results as JSON with secrets masked. A teammate replays it in a fresh scope without the network, or copies it as a vitest test.

Traces

Health checks with fixes

Units without sid, duplicate sids, leaks, cycles, stale reads, writes to derived stores, a foreign inspector — each explained, each with a fix. Infinite loops are stopped before the tab freezes.

Health

Every setup

React, Vue, Solid, Next.js App Router, Node and SSR, React Native, global mode without fork(), with or without the babel/swc plugin. Chrome, Edge and Firefox.

Frameworks

Free when closed

With DevTools closed the agent stops recording after 10 seconds and costs about as much as no agent. Production builds resolve to a no-op.

Performance

Two lines to start ​

ts
// the very first import of your app
import '@deffector/agent';
tsx
// render with a provider deffector can switch (time travel and replay)
import { DeffectorProvider } from '@deffector/agent/react';

<DeffectorProvider value={scope} name="client">
  <App />
</DeffectorProvider>;

Open DevTools → deffector.

The Log tab: transactions on the left, the Why tab of the selected transaction on the rightThe Log tab: transactions on the left, the Why tab of the selected transaction on the right