State Inspector находит stores Redux, Zustand, Pinia и Vuex на странице, на которой вы находитесь, показывает их состояние в виде живого дерева и позволяет вам отправлять действия, исправлять состояние или вызывать действия store без открытия отладчика.
Ошибки внешнего интерфейса очень часто живут в состоянии, а не в разметке: флаг, который никогда не меняется, список, содержащий устаревший элемент, пользовательский объект, в котором отсутствует поле, ожидаемое интерфейсом. Инструменты разработчика Framework могут это показать, но только когда установлено правильное расширение, сборка предоставляет его, и вы находитесь на машине, где вы можете открыть отладчик. На промежуточном сайте, ноутбуке коллеги или рабочей странице это часто не так.
Этот инструмент считывает stores прямо со страницы. Redux находится через react-redux store с его 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, находятся автоматически — без настройки и без перехвата devtools в сборке.
Вложенное состояние в виде складного дерева, которое обрабатывает 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 инструментов разработчика для вашего браузера.
