State Inspector nájde stores Redux, Zustand, Pinia a Vuex na stránke, na ktorej sa nachádzate, zobrazí ich stav ako živý strom a umožní vám odosielať akcie, stav opravy alebo volať akcie store bez otvorenia debuggera.
Chyby front-endu sa veľmi často vyskytujú v stave a nie v značkách: vlajka, ktorá sa nikdy neprevráti, zoznam obsahujúci zastaranú položku, objekt používateľa, ktorému chýba pole, ktoré rozhranie očakáva. Framework devtools to môžu zobraziť, ale iba keď je nainštalované správne rozšírenie, zostava to odhalí a ste na počítači, kde môžete otvoriť debugger. Na pracovisku, kolegovom notebooku alebo produkčnej stránke to tak často nie je.
Tento nástroj číta stores priamo zo stránky. Redux je možné nájsť prostredníctvom store react-redux hands svojmu Provider, Pinia a Vuex prostredníctvom aplikácie Vue, v ktorej sú nainštalované ( Vue 3 a Vue 2), a Zustand prostredníctvom store vystaveného na window alebo prostredníctvom komponentov, ktoré z neho čítajú. Každý store je uvedený s miestom, kde bol nájdený, a jeho stav je zobrazený ako zbaliteľný strom, vďaka ktorému sú Maps, Sets, Dates, funkcie a kruhové odkazy čitateľné namiesto toho, aby sa nepodarilo serializovať.
Live režim každé dve sekundy znovu načíta vybraný store, zvýrazňuje kľúče najvyššej úrovne, ktoré sa zmenili, a uchováva krátky denník zmien, takže môžete klikať po stránke a sledovať, ktorej časti stavu sa každá interakcia dotýka. Filter nájde akýkoľvek kľúč alebo cestu vo veľkom strome stavov a Copy state JSON vám poskytne snímku hlásenia chyby alebo testovacieho prípravku.
Keď čítanie nestačí, zmeňte ho na mieste: odošlite akciu Redux, zlúčte objekt do stavu Zustand alebo zavolajte jednu z jeho akcií, $patch store Pinia alebo spustite jeho akcie s argumentmi a potvrďte mutácie alebo odošlite akcie vo Vuex, vrátane modulov s menným priestorom. Strom a stránka sa okamžite aktualizujú. Nástroj je tiež jasný v tom, čo nemôže dosiahnuť: store ktorý sa nachádza vo vnútri modulu a nikdy sa nedostane do rozhrania, je zvonku neviditeľný a panel vysvetľuje, ako ho odhaliť počas vývoja.
Redux a Redux Toolkit, Zustand, Pinia a Vuex na Vue 2 a Vue 3 sa našli automaticky – bez nastavovania a bez háčika na vývojové nástroje.
Vnorený stav ako skladací strom, ktorý spracováva Maps, Sets, Dates, funkcie, inštancie tried a kruhové referencie, pričom getry Pinia a Vuex sú zobrazené samostatne.
Live režim zvýrazňuje kľúče najvyššej úrovne, ktoré sa zmenili, a zaznamenáva každú zmenu s časovou pečiatkou, takže môžete mapovať interakcie na aktualizácie stavu.
Odošlite akcie Redux, zavolajte akcie Zustand a Pinia s argumentmi, $patch stav Pinia, zlúčte sa do stavu Zustand a potvrďte alebo odošlite vo Vuex.
Filtrujte veľký stavový strom podľa kľúča alebo cesty a potom skopírujte celý stav ako JSON pre hlásenie chyby, testovacie zariadenie alebo porovnanie.
V aplikácii nie je potrebné nič inštalovať a nie je potrebné žiadne zostavovanie ladenia – funguje to pri príprave, produkcii a na stránkach iných ľudí, kdekoľvek sú stores dostupné.
Skontrolujte, či je chyba v údajoch alebo v zobrazení: ak už má store nesprávnu hodnotu, problém nie je v komponente.
Uveďte store do stavu, ktorý je ťažké dosiahnuť kliknutím – prázdny košík, vypršaná relácia, tisíc položiek – a uvidíte, ako si rozhranie poradí.
Prečítajte si živé stores nasadenej zostavy, kde nie sú pripojené Redux DevTools alebo Vue Devtools.
Kliknite na aplikáciu a sledujte denník zmien, aby ste zistili, ktoré interakcie aktualizujú ktorú časť stavu.
Pridajte do lístka presnú snímku store JSON namiesto opisu toho, čo zobrazovalo rozhranie.
Kliknite na ikonu State Inspector v doku DevSuite Pro na stránke React alebo Vue. Každý store ktorý nájde, je uvedený so svojou knižnicou a kde bol nájdený.
Vyberte store, aby ste videli jeho stav ako strom. Rozbaľte vetvy, ktoré potrebujete, alebo zadajte filter a preskočte priamo na kľúč alebo cestu.
So zapnutým Live interagujte so stránkou a sledujte denník zmien: každý záznam zobrazuje čas a klávesy najvyššej úrovne, ktoré sa zmenili.
Zadajte akciu, opravu alebo argumenty ako JSON a spustite ju. Strom a stránka sa okamžite aktualizujú, takže môžete testovať okrajové prípady bez toho, aby ste sa dotkli kódu.
Copy state JSON zachytáva store tak, ako je práve teraz, pripravený na vloženie do tiketu, testu alebo porovnávacieho nástroja.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 74 vývojárskych nástools pre váš prehliadač.
