Расширение DevTools

Расширение Text.js для DevTools добавляет панель Text.js рядом с панелью «Консоль». Оно позволяет исследовать приложение, которое рендерится в консоли.

• Компоненты: дерево React каждого корня консоли с пропсами, хуками, ключами и соответствующими узлами сцены tx-box / tx-text, расположенными в ячейках.
• Кадр: текущий кадр в виде сетки ячеек. Наведите указатель на ячейку, чтобы увидеть, какой компонент её отрисовал. Щёлкните, чтобы выбрать узел. Он будет подсвечен в работающей консоли.
• Временная шкала: время работы React, расчёта макета, отрисовки и кодирования для каждого кадра, пропущенные и выведенные кадры, интервалы между кадрами и span с %c.
• Управление: приостановка и возобновление вывода, переключение каркаса макета, фиксация или подгонка размера сетки, копирование кадра в виде текста.

#Установка

Расширение собирается из packages/devtools-extension и загружается в распакованном виде:

bun run --cwd packages/devtools-extension build

1. Откройте chrome://extensions и включите «Режим разработчика».
2. Нажмите «Загрузить распакованное расширение» и выберите packages/devtools-extension/dist.
3. Перезагрузите приложение и откройте DevTools. Панель Text.js появится, когда страница создаст корень консоли.

При сборке также создаётся release/textjs-devtools-<version>.zip, готовый для Интернет-магазина Chrome.

#Компоненты

Выберите компонент, чтобы увидеть его пропсы, хуки в порядке вызова (State, Ref, Memo, Effect и так далее, с текущими значениями) и узел сцены, который он рендерит, с позицией, размером и отступами блока в ячейках. При наведении указателя на строку узел подсвечивается в консоли. Узлы хоста показывает или скрывает элементы tx-box и tx-text между компонентами.

Дерево обновляется после коммитов, пока панель открыта. Значения представляют собой сводки для отображения, а не живые объекты.

#Кадр

Инспектор кадра отображает буфер ячеек рендерера: каждый глиф, цвет текста, фон и атрибут. При наведении указателя на ячейку показываются её символ и цвета, верхний узел сцены в порядке отрисовки (с учётом overflow, смещений прокрутки и zIndex) и компоненты, которые отрендерили этот узел. Щелчок выбирает узел в разделе Компоненты и подсвечивает его в работающей консоли собственным слоем подсветки рендерера.

#Временная шкала

Каждый столбец соответствует одному кадру рендерера:

Пропущенные кадры отображаются бледными: ничего не изменилось, поэтому ничего не было выведено в консоль. График интервалов показывает промежутки между выведенными кадрами относительно минимального интервала в 66 мс.

Измерение времени заканчивается на console.log(). Форматирование и отрисовка сообщения происходят внутри DevTools и недоступны для наблюдения со страницы, поэтому временная шкала их не показывает. Конкурентные рендеры, коммит которых происходит между кадрами, учитываются как коммиты без измерения времени.

#Принцип работы

Как и React DevTools, расширение устанавливает глобальный хук до запуска страницы:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Каждый корень консоли регистрируется в нём при создании. Без расширения хук не существует, и корень проверяет его наличие только один раз, не выполняя никакой работы на каждом кадре. Когда расширение установлено, но панель закрыта, затраты на кадр составляют одно чтение свойства. Деревья и кадры вычисляются только по запросу панели.

Сообщения передаются по цепочке: страница → контентный скрипт → сервис-воркер → панель. Контентные скрипты выполняются на каждой странице, чтобы хук существовал до запуска приложения. Это единственный доступ, который запрашивает расширение. Оно не загружает удалённый код и ничего не отправляет за пределы компьютера.

#Конфиденциальность

Расширение не собирает данные. Оно не выполняет сетевых запросов, ничего не хранит и не использует аналитику. Деревья компонентов, кадры и замеры времени передаются только между страницей и панелью DevTools в одном браузере и удаляются при закрытии DevTools. При нажатии Копировать кадр текст кадра записывается в буфер обмена.

#Ограничения

• Chrome и браузеры на основе Chromium версии 111 или новее.
• Приложения, запущенные до установки расширения, нужно перезагрузить.
• Инспектируется только верхний фрейм вкладки.
• Время измеряется через performance.now(), точность которого браузеры снижают примерно до 0,1 мс.