Log

Во вкладке Log проходит большая часть работы. Каждая строка — одна транзакция: корневой вызов (клик, таймер, завершившийся эффект, правка из панели) и все шаги ядра, которые он вызвал. Справа инспектор объясняет выбранную транзакцию.

Язык панели

Панель говорит на языке браузера; кнопка RU / EN в панели инструментов переключает его. На скриншотах панель на английском, а в тексте даны русские подписи — названия вкладок (Log, Stores, Effects, Graph, Traces, Health) одинаковы в обоих языках.

Панель инструментов

Панель инструментов над вкладками относится ко всей панели, но в основном фильтрует лог.

Элемент	Что делает
● Начать запись / Остановить запись	останавливает и возобновляет запись; на паузе статус пишет «запись на паузе»
⊘ Очистить лог (Ctrl+L)	очищает историю; текущее состояние становится новой базой
scope	показывает все scope или один из них. ● — scope, который приложение отображает сейчас, ⑂ — ветка, созданная deffector
воронка	сохранённые фильтры
Фильтр по имени (regex)	регулярное выражение по имени строки без учёта регистра; некорректный regex работает как поиск подстроки
Все · События · Эффекты · Правки · Проблемы	быстрые фильтры со счётчиками. Правки — транзакции, запущенные из deffector; Проблемы — с исключением, вызовом вне scope, остановленным filter, двойным обновлением, ошибкой эффекта или обрезанным деревом шагов
внутренние узлы	показывает в дереве шагов и в Stores ещё и внутренние узлы deffector и effector
статус	effector 23.4.4 · 176 юнитов · 12 транз.
лупа	палитра команд (Ctrl+K)
Экспорт трейса (Ctrl+S) / Импорт трейса	открывают вкладку Traces; экспорт сразу формирует JSON
EN / RU	переключает язык панели

Клавиши 1–6 переключают вкладки (когда фокус не в поле ввода).

Строки

В строке — номер, время от запуска агента (+0.95s), значок корневого юнита, его имя и сводка: что изменилось ($count 0 → 1), что вернул эффект (✓ done [] · 81 ms) или что пошло не так. Справа — число шагов.

Значки следуют цветам панели: ▶ событие (жёлтый), ■ стор (синий), □ производный стор, ◆ эффект (фиолетовый). Цветная полоска слева различает вызовы в scope приложения (розовая), правки из deffector (голубая), ветки (фиолетовая) и вызовы, ушедшие в глобальный граф (красная).

Бейджи указывают, на что стоит посмотреть:

Бейдж	Значение
2× $errors	стор пересчитался в этой транзакции дважды
вне scope	корень вызван вне scope, хотя приложение использует fork()
filter	filter в sample/guard вернул false
старое значение	sample прочитал стор до того, как тот обновился в этой же транзакции
запись в производный	в производный стор записали напрямую
остановлено	deffector оборвал бесконечный цикл
devtools	запущено из панели (правка, вызов, пресет)
трейс	результат воспроизведения трейса
ветка	произошло в scope-ветке (например, после перехода с разрешёнными кликами)
заметка	у транзакции есть заметка
↳ #3	вызвано изнутри транзакции #3 (из watcher или хендлера эффекта)

Клик выбирает строку; ↑ / ↓ двигают выделение, Enter или двойной клик переходят к этому моменту (см. Перемещение во времени).

Инспектор

Заголовок повторяет транзакцию: номер, имя, scope, время, число шагов и сколько работало ядро. Дальше — действия:

• Перейти к шагу — показать приложение в этот момент;
• Повторить — снова вызвать то же событие с тем же payload в scope, который вы сейчас смотрите (только для событий);
• Пропустить / Вернуть шаг — пересчитать историю scope без этого внешнего вызова, как в Redux DevTools. deffector воспроизводит все остальные внешние вызовы в новой ветке, результаты эффектов берутся из записи. Нужны fork() и адаптер;
• Заметка — прикрепить заметку (см. ниже);
• Ссылка — скопировать #step=N в буфер обмена.

Почему

Сначала идут объяснения обычным языком, например:

• «$errors пересчитан дважды: потребитель, объявленный раньше источников, сначала читает старое значение. effector упорядочивает combine и sample по порядку объявления, а не по графу.»
• «greetingShown вызван вне scope. Изменение ушло в глобальный граф, а приложение читает свой scope, поэтому интерфейс его не видит. Исправление: scopeBind до выхода из эффекта.»
• «sample(...) не сработал: filter вернул false, target не вызван, состояние не изменилось.»
• «Исключение остановило эту ветку. Соседние ветки уже применились, производные сторы могут разойтись с источниками.»
• «Вызвано изнутри транзакции #3 (watcher или хендлер эффекта).», «Результат вызова эффекта из транзакции #5.», «Запущено из deffector: …».

Ниже — дерево шагов в том порядке, в котором их выполнило ядро. У каждого шага есть лейн (pure, read, child, sampler, barrier, effect — приоритеты effector), юнит и значение: было → стало для сторов, ✕ filter = false для остановленного filter, ошибка для исключения, номер вызова для эффекта. Короткие пометки объясняют шаги, которые ничего не сделали: «то же значение (===): обновление пропущено», «undefined: обновление пропущено». Юнит с известным местом в коде — ссылка: она открывает файл в панели Sources на нужной строке.

Дерево шагов ограничено maxSteps шагами на транзакцию (по умолчанию 5000, см. Настройки).

Последовательность

Та же транзакция в виде диаграммы последовательности: юниты — линии жизни, операторы — стрелки с подписями call, sample, on, map… и значением, которое они передали. ✕ отмечает filter, который не пропустил значение. Рисуется до десяти юнитов, остальные сводятся в «ещё N юнит(ов)».

Diff, Состояние, Payload

• Diff — каждый изменившийся стор, было → стало, новое значение можно раскрыть;
• Состояние — значения всех сторов scope после этой транзакции; изменившиеся подсвечены;
• Payload — с чем был вызван корневой юнит.

Заметки и ссылки

Заметка открывает поле: «Что здесь не так? Заметка попадёт в трейс.» Транзакция с заметкой получает бейдж заметка, текст виден во вкладке Почему и экспортируется вместе с трейсом — тот, кто его воспроизведёт, увидит на этом шаге «Заметка автора трейса: …».

Ссылка копирует #step=N. Вставьте её после трейса в поле импорта или в поле Открыть на шаге во вкладке Traces, и воспроизведение остановится на этой транзакции. Если при экспорте выбрана транзакция, флажок «открыть на #N после воспроизведения» записывает то же самое в трейс (meta.focus).