State Inspector намира stores Redux, Zustand, Pinia и Vuex на страницата, на която се намирате, показва състоянието им като дърво на живо и ви позволява да изпращате действия, да извършвате корекции в състояние или да се обаждате на действия store, без да отваряте програма за отстраняване на грешки.
Бъговете в предния край много често живеят в състояние, а не в маркиране: флаг, който никога не се обръща, списък, съдържащ остарял елемент, потребителски обект, в който липсва полето, което интерфейсът очаква. Framework devtools може да го покаже, но само когато е инсталирано правилното разширение, компилацията го излага и вие сте на машина, на която можете да отворите програма за отстраняване на грешки. На сценичен сайт, лаптоп на колега или производствена страница това често не е така.
Този инструмент чете 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 hook в компилацията.
Вложено състояние като сгъваемо дърво, което обработва 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+ инструмента за разработчици за вашия браузър.
