deffector

Русский

English

Русский

English

Тема

Star

deffectorDevTools для effector

Каждое действие пользователя — одна транзакция. Перемещение во времени, подмена состояния и трейсы, по которым коллега воспроизводит ваш баг.

Быстрый старт
Установить в Chrome
Установить в Firefox
Что такое deffector?
Живое демо
deffector

Одно действие — одна транзакция

Событие и всё, что оно вызвало, — одной строкой в логе, с деревом шагов в том порядке, в котором их выполнило ядро effector. Видны filter, вернувший false, двойные пересчёты, чтение устаревших значений, вызовы вне scope.

Log

Перемещение во времени

Переход к любой транзакции. С fork() приложение показывает форк этого момента, а настоящее не трогается; страница накрыта, чтобы случайный клик не изменил прошлое.

Перемещение во времени

Своё состояние в любом сторе

Значение можно задать «вживую» (попадёт в лог, как allSettled) или тихо, в новом scope. Пресеты целой формы, снимок { sid → значение } с diff перед применением.

Stores

Эффекты под контролем

Водопад вызовов в духе вкладки Network, ответы не по порядку подсвечены. Эффект можно держать в pending, вернуть значение или ошибку, добавить задержку или подставить свой хендлер.

Effects

Трейсы, которые воспроизводят баги

Начальное состояние, внешние вызовы и результаты эффектов — в JSON, секреты замаскированы. Коллега воспроизводит его в новом scope без сети или копирует как тест для vitest.

Traces

Проверки с готовыми исправлениями

Сторы без sid, повторяющиеся sid, утечки юнитов, циклы, устаревшее чтение, запись в производные сторы, чужой инспектор — у каждой проблемы есть объяснение и исправление. Бесконечный цикл обрывается до того, как вкладка зависнет.

Health

Любая конфигурация

React, Vue, Solid, Next.js App Router, Node и SSR, React Native, глобальный режим без fork(), с babel/swc-плагином и без него. Chrome, Edge и Firefox.

Фреймворки

Почти бесплатно, пока DevTools закрыты

Без открытой панели агент перестаёт писать через 10 секунд и стоит примерно как его отсутствие. В продакшен-сборке все точки входа — пустышки.

Производительность

Две строки для начала ​

ts
// самый первый импорт приложения
import '@deffector/agent';
tsx
// рендер через провайдер, который deffector умеет переключать (перемещение во времени и воспроизведение)
import { DeffectorProvider } from '@deffector/agent/react';

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

Откройте DevTools → deffector.

Вкладка Log: транзакции слева, вкладка «Почему» выбранной транзакции справаВкладка Log: транзакции слева, вкладка «Почему» выбранной транзакции справа