State Inspector najde stores Redux, Zustand, Pinia in Vuex na strani, na kateri ste, prikaže njihovo stanje kot živo drevo in vam omogoča pošiljanje dejanj, stanje popravkov ali klicanje dejanj store, ne da bi morali odpreti razhroščevalnik.
Sprednje napake zelo pogosto živijo v stanju in ne v označevanju: zastavica, ki se nikoli ne obrne, seznam, ki vsebuje zastarel element, uporabniški objekt, ki nima polja, ki ga pričakuje vmesnik. Orodja za razvijalce ogrodja ga lahko prikažejo, vendar le, ko je nameščena prava razširitev, jo zgradba razkrije in ste na računalniku, kjer lahko odprete razhroščevalnik. Na uprizoritvenem mestu, kolegovem prenosnem računalniku ali produkcijski strani pogosto ni tako.
To orodje bere stores neposredno s strani. Redux najdemo prek store react-redux ki posreduje svojemu Provider, Pinia in Vuex prek aplikacije Vue, v kateri sta nameščena ( Vue 3 in Vue 2), Zustand pa prek store izpostavljene na window ali prek komponent, ki berejo iz nje. Vsaka store je navedena s tem, kje je bila najdena, in njeno stanje je prikazano kot zložljivo drevo, ki ohranja berljivost Maps, Sets, Dates, funkcij in krožnih sklicev, namesto da bi jih bilo mogoče serializirati.
Način Live vsaki dve sekundi znova prebere izbrano store, poudari ključe najvišje ravni, ki so bili spremenjeni, in vodi kratek dnevnik sprememb, tako da lahko klikate po strani in opazujete, katerega dela stanja se dotakne posamezna interakcija. Filter najde poljuben ključ ali pot v velikem drevesu stanj, Copy state JSON pa vam ponudi posnetek za poročilo o hroščih ali preskusno napeljavo.
Ko branje ni dovolj, ga spremenite na mestu: odpošljite dejanje Redux, združite objekt v stanje Zustand ali pokličite eno od njegovih dejanj, $patch store Pinia ali zaženite njena dejanja z argumenti in potrdite mutacije ali odpošljite dejanja v Vuex, vključno z moduli z imenskim prostorom. Drevo in stran se takoj posodobita. Orodju je tudi jasno, česa ne more doseči: store ki je shranjena v modulu in nikoli ni predana vmesniku, je od zunaj nevidna, plošča pa pojasnjuje, kako jo izpostaviti med razvojem.
Redux in Redux Toolkit, Zustand, Pinia in Vuex na Vue 2 in Vue 3, najdeni samodejno – brez nastavitev in brez orodja za razvijalce v gradnji.
Ugnezdeno stanje kot zložljivo drevo, ki obravnava Maps, Sets, Dates, funkcije, primerke razredov in krožne reference, pri čemer so pridobivalniki Pinia in Vuex prikazani ločeno.
Način Live poudari ključe najvišje ravni, ki so se spremenili, in vsako spremembo zabeleži s časovnim žigom, tako da lahko preslikate interakcije v posodobitve stanja.
Pošiljanje dejanj Redux, klicanje dejanj Zustand in Pinia z argumenti, stanje $patch Pinia, spajanje v stanje Zustand in potrditev ali pošiljanje v Vuex.
Filtrirajte veliko drevo stanj po ključu ali poti, nato kopirajte celotno stanje kot JSON za poročilo o hroščih, preskusno napeljavo ali primerjavo.
V aplikaciji ni ničesar za namestitev in ni potrebna nobena zgradba za odpravljanje napak — deluje na uprizoritvi, v produkciji in na spletnih mestih drugih ljudi, kjer koli so stores dosegljive.
Preverite, ali je napaka v podatkih ali v pogledu: če store že vsebuje napačno vrednost, komponenta ni težava.
store postavite v stanje, ki ga je težko doseči s klikom – prazen voziček, potečena seja, tisoč artiklov – in si oglejte, kako se vmesnik spopada.
Preberite žive stores razporejene gradnje, kjer Redux DevTools ali Vue Devtools niso povezani.
Kliknite aplikacijo in si oglejte dnevnik sprememb, da izveste, katere interakcije posodobijo kateri del stanja.
Vstopnici dodajte natančen posnetek store JSON namesto da bi opisali, kaj je prikazal vmesnik.
Kliknite ikono State Inspector v doku DevSuite Pro na strani React ali Vue. Vsaka store ki jo najde, je navedena s svojo knjižnico in mestom, kjer je bila najdena.
Izberite store, da vidite njeno stanje kot drevo. Razširite veje, ki jih potrebujete, ali vnesite filter, da skočite naravnost na ključ ali pot.
Ko je vklopljen Live, komunicirajte s stranjo in si oglejte dnevnik sprememb: vsak vnos prikazuje čas in ključe najvišje ravni, ki so se spremenili.
Vnesite dejanje, popravek ali argumente kot JSON in ga zaženite. Drevo in stran se takoj posodobita, tako da lahko preskusite robne primere, ne da bi se dotaknili kode.
Copy state JSON zajame store, kakršna je trenutno, pripravljeno za lepljenje v vstopnico, test ali orodje za primerjavo.
Namestite DevSuite Pro brezplačno in odklenite več kot 74 orodij za razvijalce za svoj brskalnik.
