deffector — effector DevTools

DevTools for effector: each user action as one transaction, time travel, state injection, effect overrides, replayable traces.

deffector is a DevTools panel for apps built with effector (https://effector.dev). It shows what your app's stores, events and effects do, and lets you change it while you debug. The extension works together with the deffector agent, a small package you add to your app (npm install @deffector/agent, then import it first). Without the agent the panel has nothing to show. The setup guide is at https://mxmvshnvsk.github.io/deffector/ What the panel gives you: - Log. Every user action becomes one transaction: the event and everything it caused, in the order effector ran it. You see which filters stopped a sample, which stores received the same value, which values were recomputed twice and which calls happened outside of a scope. - Time travel. Jump to any transaction and the app shows that moment. With fork() the past is rendered in a separate copy, and the page is locked so a click cannot change it. - Stores. Read and edit any value, save the state of a whole form as a preset and restore it in one click. - Effects. A waterfall of effect calls. You can keep a call pending, resolve or reject it with your own value, or add latency. - Traces. Export a session with secrets masked, so a teammate can replay your bug in a fresh scope without the network, or turn it into a test. - Health. Common effector mistakes are listed with an explanation and a fix. An endless loop of events is stopped before it freezes the tab. The extension makes no network requests and collects no data. In production builds the agent does nothing, so it never reaches your users. Try it on the live demo: https://mxmvshnvsk.github.io/deffector/demo/ Source code (MIT): https://github.com/mxmvshnvsk/deffector