Оригинальная статья: https://aralroca.com/blog/teaful-devtools
Очень недавно 2 недели назад мы выпустили Чайный ; Крошечное, легко и мощное управление государством реагирования. Если вы хотите узнать больше о Seayful, я рекомендую Эта статья Отказ
Teaily был Хорошо принято (+500 GH Звезды) И одна из самых запрошенных функций состояла в том, чтобы реализовать devtool для отладки магазинов. Сегодня мы выпустили Teaifial devtools Отказ В этой короткой статье я немного объясню о том, как его использовать и его преимущества.
Как это использовать
4 Простые шаги:
- Установите расширение devtools : На данный момент только в Хром Отказ
- Установите мост :
пряжа Добавить Tealiful-devtools Используйте мост :
Импорт «Teeal-devtools»(~ 200 б) Должен быть первый импорт.Откройте Devtools и попробуйте это Отказ
Подробнее в Readme Отказ
Изменения хранилище отладки
Для каждого магазина можно просмотреть История изменений которые были сделаны в магазин. Для отладки, мы можем знать Когда Изменение было сделано, Что / Где был изменен, но и Кто / Как / Почему Отказ
Когда
Нет секрета, изменения имеют свой собственный меток и отсортированы по прибытии.
Какой/Где
Для каждой модификации вы сможете увидеть, какая часть магазина изменилась, и какова новое значение (различие).
Кто/как/почему
Вы можете просмотреть Весь стоп трассировки и перейдите к строке в исходном файле.
Нажатие на ссылку на файл открывает Source devtools вкладка где вы можете Просмотр кода Часть, чтобы увидеть, как было произведено изменение. Чтобы понять больше контекста, вы также можете перейти к функции, которая называла эту функцию, чтобы увидеть весь код код. Для получения более контекста вы можете поставить точку останова на вкладке «Источник», чтобы увидеть значение каждой переменной, вызванную изменением.
Изменить магазин из Teaifial devtools
От Teaiful devtools вы можете создавать изменение в магазине и посмотреть, как реагирует пользовательский интерфейс.
Темный и легкий режим
Тема темной/света адаптируется к вашей конфигурации Devtools.
Просмотр Rerenders/Performance
Это функция, которая не была реализована в Tealiful devtools, потому что мы считаем, что React Devtools делает это очень хорошо.
Вы можете использовать React devtools для отладки Rerenders и производительности.
Как раздеть devtools от производства
Большинство бундлеров позволяют выкладывать код, когда обнаруживают, что ветвь внутри IF-оператора никогда не будет ударена. Мы можем использовать это только для включения Teaiful-devtools Во время разработки и спасения этих драгоценных байтов в производственной сборке.
// Must be the first import
if (process.env.NODE_ENV==='development') {
// Must use require here as import statements are only allowed
// to exist at top-level.
require("teaful-devtools");
}
import { render } from 'preact';
import App from './components/App';
render(Обязательно установите Node_env Переменная к правильному значению в вашем сборке.
Выводы
Мы выпустили Teaultiful devtools для отладки изменений из магазинов: когда, что, где, кто, как, почему. И наоборот, чтобы вызвать изменения от Teaiful devtools, чтобы увидеть, как реагирует пользовательский интерфейс.
На данный момент доступен только для Chrome, но в будущих выпусках он также будет доступен для Firefox и Edge.
Вы можете оставить какие-либо предложения на Github (Выпуск/PR) И это будет принято во внимание. Помните, что Чайный проект все еще в ранней версии 0.x и вместе мы сделаем это развиваться.
Оригинал: “https://dev.to/aralroca/teaful-devtools-released-37lp”