State Inspector знаходить stores Redux, Zustand, Pinia та Vuex на сторінці, на якій ви перебуваєте, показує їхній стан у вигляді живого дерева та дозволяє відправляти дії, виправляти стан або викликати дії store, не відкриваючи налагоджувач.
Інтерфейсні помилки дуже часто містяться в стані, а не в розмітці: прапорець, який ніколи не повертається, список, що містить застарілий елемент, об’єкт користувача, у якому відсутнє поле, яке очікує інтерфейс. Інструменти розробки Framework можуть показати це, але лише коли встановлено правильне розширення, збірка розкриває його, і ви перебуваєте на машині, де можете відкрити налагоджувач. На сценічному сайті, на ноутбуці колеги чи на робочій сторінці це часто не так.
Цей інструмент читає stores прямо зі сторінки. Redux можна знайти через store react-redux передає його Provider, Pinia і Vuex через додаток Vue, у якому вони встановлені ( Vue 3 і Vue 2), а Zustand через store відкритий у window, або через компоненти, які зчитуються з нього. Кожне store містить список із зазначенням того, де його було знайдено, а його стан відображається у вигляді дерева, що згортається, яке зберігає доступними для читання Maps, Sets, Dates, функції та циклічні посилання, а не серіалізацію.
Режим Live перечитує вибране store кожні дві секунди, виділяє ключі верхнього рівня, які змінилися, і веде короткий журнал змін, тож ви можете клацати сторінкою та спостерігати, якої частини стану торкається кожна взаємодія. Фільтр знаходить будь-який ключ або шлях у великому дереві станів, а Copy state JSON дає вам знімок для звіту про помилку або тестового приладу.
Якщо читання недостатньо, змініть його на місці: відправте дію Redux, об’єднайте об’єкт у стан Zustand або викличте одну з його дій, $patch store Pinia або запустіть його дії з аргументами, а також зафіксуйте мутації або відправте дії у Vuex, включаючи модулі з простором імен. Дерево та сторінка оновлюються негайно. Інструмент також чітко визначає, до чого він не може дістатися: store яке зберігається всередині модуля й ніколи не передається в інтерфейс, невидиме ззовні, а панель пояснює, як відкрити його під час розробки.
Redux і Redux Toolkit, Zustand, Pinia і Vuex на Vue 2 і Vue 3, знайдені автоматично — без налаштування та інструментів розробника в збірці.
Вкладений стан як дерево, що згортається, яке обробляє Maps, Sets, Dates, функції, екземпляри класів і циклічні посилання, де геттери Pinia та Vuex показані окремо.
У режимі Live виділяються ключі верхнього рівня, які змінилися, і реєструється кожна зміна з міткою часу, щоб ви могли зіставляти взаємодії з оновленнями стану.
Відправлення дій Redux, виклик дій Zustand і Pinia з аргументами, стан $patch Pinia, об’єднання в стан Zustand і фіксація або відправка у Vuex.
Відфільтруйте велике дерево станів за ключем або шляхом, а потім скопіюйте весь стан у форматі JSON для звіту про помилку, тестового приладу чи порівняння.
У програмі нічого не потрібно встановлювати, і не потрібна збірка для налагодження — вона працює на сцені, у виробництві та на сайтах інших людей, де б не було доступних stores.
Перевірте, чи є помилка в даних чи в поданні: якщо store вже містить неправильне значення, проблема не в компоненті.
Переведіть store у такий стан, до якого важко дістатися клацанням миші — порожній кошик, завершена сесія, тисяча товарів — і подивіться, як справляється інтерфейс.
Читайте живі stores розгорнутої збірки, де Redux DevTools або Vue Devtools не підключені.
Натисніть програму та перегляньте журнал змін, щоб дізнатися, яка взаємодія оновлює яку частину стану.
Додайте до квитка точний JSON знімок store замість опису того, що показав інтерфейс.
Клацніть піктограму State Inspector в док-станції DevSuite Pro на сторінці React або Vue. У кожному знайденому store вказано його бібліотеку та місце його знаходження.
Виберіть store, щоб побачити його стан у вигляді дерева. Розгорніть потрібні гілки або введіть фільтр, щоб перейти прямо до ключа чи шляху.
Увімкнувши Live, взаємодійте зі сторінкою та дивіться журнал змін: кожен запис показує час і ключі верхнього рівня, які змінилися.
Введіть дію, патч або аргументи як JSON і запустіть їх. Дерево та сторінка оновлюються одразу, тож ви можете тестувати крайові випадки, не торкаючись коду.
Copy state JSON фіксує store таким, яким він є зараз, готовий для вставлення в квиток, тест або інструмент порівняння.
Встановіть DevSuite Pro безкоштовно та отримайте понад 74 інструментів розробника
