State Inspector проналази Redux, Zustand, Pinia и Vuex stores на страници на којој се налазите, приказује њихово стање као живо стабло и омогућава вам да отпремате акције, стање закрпе или позивате радње store без отварања програма за отклањање грешака.
Предње грешке често живе у стању, а не у маркупу: заставица која се никада не окреће, листа која садржи застарелу ставку, кориснички објекат који недостаје поље које интерфејс очекује. Фрамеворк девтоолс то може показати, али само када је инсталирано право проширење, изградња га открива и ви сте на машини на којој можете да отворите програм за отклањање грешака. На сценском месту, лаптопу колеге или страници за продукцију, то често није случај.
Овај алат чита 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 Pinia store или покрените његове акције са аргументима и извршите мутације или отпремите акције у 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 каква је тренутно, спремна за налепљивање у тикет, тест или алатку за поређење.
Instalirajte DevSuite Pro besplatno i otključajte 74+ alata za programere za svoj pretraživač.
