State Inspector leiab teie avatud lehelt Redux, Zustand, Pinia ja Vuex stores, kuvab nende olekut reaalajas puuna ja võimaldab teil toiminguid, paikade olekut või store toiminguid välja kutsuda ilma silurit avamata.
Esiotsa vead esinevad sageli pigem olekus kui märgistuses: lipp, mis kunagi ümber ei pööra, aegunud üksust sisaldav loend, kasutajaobjektil puudub liidese oodatud väli. Frameworki devtools võivad seda näidata, kuid alles siis, kui õige laiendus on installitud, paljastab järg selle ja olete masinas, kus saate siluri avada. Lavastusplatsil, kolleegi sülearvutis või tootmislehel see sageli nii ei ole.
See tööriist loeb stores otse lehelt. Redux leitakse store react-redux käte kaudu selle Provider, Pinia ja Vuex kaudu Vue rakenduse kaudu, kuhu need on installitud ( Vue 3 ja Vue 2), ning Zustand kaudu window avatud store või sealt loetavate komponentide kaudu. Iga store on loetletud koos selle leidmise kohaga ja selle olek kuvatakse kokkupandava puuna, mis hoiab Maps, Sets, Dates, funktsioonid ja ümmargused viited loetavana, selle asemel et seeriaseerida.
Live režiim loeb valitud store uuesti iga kahe sekundi järel, tõstab esile muudetud ülataseme klahvid ja peab lühikest muudatuste logi, et saaksite lehel ringi klõpsata ja vaadata, millist oleku osa iga interaktsioon puudutab. Filter leiab suurest olekupuust mis tahes võtme või tee ja Copy state JSON annab teile veaaruande või testseadme hetktõmmise.
Kui lugemisest ei piisa, muutke see paika: saatke Redux toiming, ühendage objekt Zustand olekusse või kutsuge üks selle toimingutest, $patch Pinia store või käivitage selle toimingud argumentidega ja tehke Vuex mutatsioone või saatke toiminguid, sealhulgas nimeruumiga mooduleid. Puu ja leht uuendatakse kohe. Tööriistal on selge ka see, milleni see ei ulatu: mooduli sees hoitav store, mida kunagi liidesele ei anta, on väljast nähtamatu ning paneel selgitab, kuidas seda arenduse käigus paljastada.
Redux ja Redux Toolkit, Zustand, Pinia ja Vuex Vue 2 ja Vue 3 puhul leiti automaatselt – ehitamisel pole seadistamist ega devtoolsi konksu.
Pesastatud olek kokkupandava puuna, mis käsitleb Maps, Sets, Dates, funktsioone, klassieksemplare ja ringikujulisi viiteid, kusjuures Pinia ja Vuex getterid on näidatud eraldi.
Live režiim tõstab esile muudetud ülataseme klahvid ja logib kõik muudatused ajatempliga, et saaksite interaktsioonid olekuvärskendustega kaardistada.
Saatke Redux toimingud, kutsuge Zustand ja Pinia toiminguid argumentidega, $patch Pinia olekut, ühendage Zustand olekuga ja pange toime või saatke Vuex.
Filtreerige suur olekupuu võtme või tee järgi, seejärel kopeerige veaaruande, testimisseadme või võrdluse jaoks kogu olek JSON -vormingus.
Rakendusse pole vaja midagi installida ja silumisjärge pole vaja – see töötab lavastamisel, tootmisel ja teiste inimeste saitidel kõikjal, kus stores on kättesaadavad.
Kontrollige, kas viga on andmetes või vaates: kui store on juba vale väärtus, pole probleem selles komponendis.
Viige store olekusse, kuhu klõpsates on raske ligi pääseda – tühi ostukorvi, aegunud seanss, tuhat toodet – ja vaadake, kuidas liides hakkama saab.
Lugege juurutatud järgu reaalajas stores, kus Redux DevTools või Vue Devtools pole ühendatud.
Klõpsake rakendusel ja vaadake muudatuste logi, et teada saada, millised interaktsioonid millist oleku osa värskendavad.
Lisage piletile store täpne JSON pilt, selle asemel, et kirjeldada, mida liides näitas.
Klõpsake React või Vue lehel DevSuite Pro dokis State Inspector ikooni. Iga leitud store on loetletud koos selle raamatukogu ja selle leidmise kohaga.
Valige store, et näha selle olekut puuna. Laiendage vajalikke harusid või tippige filtrisse, et hüpata otse võtmele või teele.
Kui Live on sisse lülitatud, suhtlege lehega ja vaadake muudatuste logi: iga kirje näitab kellaaega ja muutunud tipptaseme klahve.
Sisestage toiming, plaaster või argumendid JSON vormingus ja käivitage see. Puu ja leht värskendatakse kohe, nii et saate katsetada servajuhtumeid ilma koodi puudutamata.
Copy state JSON jäädvustab store sellisena, nagu see praegu on, valmis kleepimiseks piletisse, testi või võrdlustööriista.
Paigaldage DevSuite Pro tasuta ja avage 74+ arendustööriista oma brauserile.
