State Inspector găsește stores Redux, Zustand, Pinia și Vuex pe pagina pe care vă aflați, arată starea acestora ca un arbore activ și vă permite să trimiteți acțiuni, să corectați starea sau să apelați acțiuni store fără a deschide un depanator.
Erorile front-end trăiesc foarte des în stare, mai degrabă decât în markup: un steag care nu se răstoarnă niciodată, o listă care conține un articol învechit, un obiect utilizator care lipsește câmpul la care se așteaptă interfața. Framework devtools îl pot arăta, dar numai atunci când este instalată extensia potrivită, build-ul o expune și vă aflați pe o mașină unde puteți deschide un depanator. Pe un site de organizare, laptopul unui coleg sau o pagină de producție, de multe ori nu este cazul.
Acest instrument citește stores direct din pagină. Redux este găsit prin intermediul store react-redux hands către Provider său, Pinia și Vuex prin intermediul aplicației Vue în care sunt instalate ( Vue 3 și Vue 2), iar Zustand printr-un store expus pe window sau prin componentele care citesc din acesta. Fiecare store este listat cu locul în care a fost găsit, iar starea acestuia este afișată ca un arbore pliabil care menține Maps, Sets, Dates, funcții și referințe circulare lizibile în loc să nu se serializeze.
Modul Live recitește store selectat la fiecare două secunde, evidențiază tastele de nivel superior care s-au schimbat și păstrează un jurnal scurt de modificări, astfel încât să puteți face clic pe pagină și să urmăriți ce parte a stării atinge fiecare interacțiune. Un filtru găsește orice cheie sau cale într-un arbore de stare mare, iar Copy state JSON vă oferă un instantaneu pentru un raport de eroare sau un dispozitiv de testare.
Când citirea nu este suficientă, schimbați-o în loc: trimiteți o acțiune Redux, îmbinați un obiect în starea Zustand sau apelați una dintre acțiunile sale, $patch un store Pinia sau rulați acțiunile sale cu argumente și comite mutații sau trimite acțiuni în Vuex, inclusiv modulele cu spații de nume. Arborele și pagina se actualizează imediat. Instrumentul este, de asemenea, clar la ce nu poate ajunge: un store păstrat în interiorul unui modul și niciodată înmânat interfeței este invizibil din exterior, iar panoul explică cum să expune unul în timpul dezvoltării.
Redux și Redux Toolkit, Zustand, Pinia și Vuex pe Vue 2 și Vue 3, găsite automat - nicio configurare și nici un cârlig de devtools în build.
Starea imbricată ca un arbore pliabil care se ocupă Maps, Sets, Dates, funcții, instanțe de clasă și referințe circulare, cu getterele Pinia și Vuex afișate separat.
Modul Live evidențiază cheile de nivel superior care s-au schimbat și înregistrează fiecare modificare cu un marcaj de timp, astfel încât să puteți mapa interacțiunile cu actualizările de stare.
Trimiteți acțiuni Redux, apelați acțiunile Zustand și Pinia cu argumente, $patch starea Pinia, fuzionați în starea Zustand și comiteți sau expediați în Vuex.
Filtrați un arbore de stări mare după cheie sau cale, apoi copiați întreaga stare ca JSON pentru un raport de eroare, un dispozitiv de testare sau o comparație.
Nimic de instalat în aplicație și nu este nevoie de construcție de depanare - funcționează pe punere în scenă, pe producție și pe site-urile altor persoane, oriunde sunt accesibile stores.
Verificați dacă bug-ul este în date sau în vizualizare: dacă store deține deja o valoare greșită, componenta nu este problema.
Puneți store într-o stare greu de atins făcând clic - un coș gol, o sesiune expirată, o mie de articole - și vedeți cum se descurcă interfața.
Citiți stores live ale unei versiuni implementate unde Redux DevTools sau Vue Devtools nu sunt conectate.
Faceți clic pe aplicație și urmăriți jurnalul de modificări pentru a afla ce interacțiuni actualizează ce parte a stării.
Adăugați un instantaneu JSON exact al store la bilet în loc să descrieți ceea ce a arătat interfața.
Faceți clic pe pictograma State Inspector din andocarea DevSuite Pro pe o pagină React sau Vue. Fiecare store pe care îl găsește este listat cu biblioteca sa și unde a fost găsit.
Selectați un store pentru a vedea starea lui ca arbore. Extindeți ramurile de care aveți nevoie sau introduceți filtrul pentru a trece direct la o cheie sau o cale.
Cu Live pornit, interacționați cu pagina și urmăriți jurnalul de modificări: fiecare intrare arată ora și tastele de nivel superior care s-au schimbat.
Introduceți o acțiune, un patch sau argumente ca JSON și rulați-l. Arborele și pagina se actualizează imediat, astfel încât să puteți testa cazuri de margine fără a atinge codul.
Copy state JSON surprinde store așa cum este acum, gata de lipire într-un bilet, un test sau un instrument de comparare.
Instalează DevSuite Pro gratuit și deblochează peste 74 de instrumente pentru dezvoltatori în browserul tău.
