State Inspector randa Redux, Zustand, Pinia ir Vuex stores puslapyje, kuriame esate, rodo jų būseną kaip gyvą medį ir leidžia siųsti veiksmus, pataisos būseną arba iškviesti store veiksmus neatidarant derinimo programos.
Priekinės dalies klaidos labai dažnai gyvena būsenoje, o ne žymėjime: vėliavėlė, kuri niekada neapverčia, sąrašas, kuriame yra pasenęs elementas, vartotojo objektas, kuriame nėra lauko, kurio tikisi sąsaja. Framework devtools gali tai parodyti, tačiau tik tada, kai įdiegtas tinkamas plėtinys, kūrinys jį atskleidžia ir jūs esate kompiuteryje, kuriame galite atidaryti derinimo programą. Statymo aikštelėje, kolegos nešiojamajame kompiuteryje ar gamybos puslapyje taip dažnai nėra.
Šis įrankis nuskaito stores tiesiai iš puslapio. Redux per store react-redux randamas jos Provider, Pinia ir Vuex per Vue programą, kurioje jie yra įdiegti ( Vue 3 ir Vue 2 “), ir Zustand per store, kuri yra ant window, arba per iš jos nuskaitomus komponentus. Kiekviena store nurodoma, kur ji buvo rasta, o jos būsena rodoma kaip sutraukiamas medis, leidžiantis skaityti Maps, Sets, Dates, funkcijas ir žiedines nuorodas, o ne nuosekliai sutvarkyti.
Live režimas iš naujo skaito pasirinktą store kas dvi sekundes, paryškina pasikeitusius aukščiausio lygio klavišus ir veda trumpą pakeitimų žurnalą, kad galėtumėte spustelėti puslapį ir stebėti, kurią būsenos dalį paliečia kiekviena sąveika. Filtras suranda bet kurį raktą arba kelią dideliame būsenos medyje, o Copy state JSON suteikia momentinį pranešimą apie riktą arba bandomąjį įrenginį.
Kai skaitymo nepakanka, pakeiskite jį vietoje: išsiųskite Redux veiksmą, sujunkite objektą į Zustand būseną arba iškvieskite vieną iš jo veiksmų, $patch Pinia store arba vykdykite jos veiksmus su argumentais ir atlikite mutacijas arba išsiųskite veiksmus Vuex, įskaitant vardų modulius. Medis ir puslapis atnaujinami nedelsiant. Įrankis taip pat aiškiai nurodo, ko jis negali pasiekti: modulyje laikoma ir sąsajai niekada nepateikta store yra nematoma iš išorės, o skydelyje paaiškinama, kaip ją atskleisti kuriant.
Redux ir Redux Toolkit, Zustand, Pinia ir Vuex Vue 2 ir Vue 3 įrenginiuose rasti automatiškai – nėra sąrankos ir jokio devtools kabliuko kūrime.
Įdėta būsena kaip sutraukiamas medis, tvarkantis Maps, Sets, Dates, funkcijas, klasių egzempliorius ir žiedines nuorodas, atskirai rodomas Pinia ir Vuex geteriai.
Live režimas paryškina aukščiausio lygio klavišus, kurie pasikeitė, ir registruoja kiekvieną pakeitimą su laiko žyma, kad galėtumėte susieti sąveikas su būsenos atnaujinimais.
Išsiųskite Redux veiksmus, iškvieskite Zustand ir Pinia veiksmus su argumentais, $patch Pinia būseną, sujunkite į Zustand būseną ir atlikite arba išsiųskite Vuex.
Filtruokite didelį būsenos medį pagal raktą arba kelią, tada nukopijuokite visą būseną kaip JSON, kad gautumėte pranešimą apie riktą, bandymo įrenginį ar palyginimą.
Programoje nieko nereikia įdiegti ir nereikia derinti – ji veikia rengiant, gamyboje ir kitų žmonių svetainėse, kad ir kur būtų pasiekiamos stores.
Patikrinkite, ar klaida yra duomenyse ar rodinyje: jei store jau yra neteisinga reikšmė, problema nėra komponentas.
Nustatykite store į tokią būseną, kurią spustelėję sunku pasiekti – tuščias krepšelis, pasibaigusi sesija, tūkstantis prekių – ir pažiūrėkite, kaip veikia sąsaja.
Skaitykite tiesiogines įdiegtos versijos stores, kuriose nėra prijungti Redux DevTools arba Vue Devtools.
Spustelėkite programą ir žiūrėkite pakeitimų žurnalą, kad sužinotumėte, kurios sąveikos atnaujina kurią būsenos dalį.
Prie bilieto pridėkite tikslų store JSON momentinį vaizdą, o ne aprašydami, ką rodo sąsaja.
Spustelėkite State Inspector piktogramą DevSuite Pro doke React arba Vue puslapyje. Kiekviena store kurią ji randa, yra nurodyta su biblioteka ir vieta, kur ji buvo rasta.
Pasirinkite store, kad pamatytumėte jos būseną kaip medį. Išskleiskite reikiamas šakas arba įveskite filtrą, kad pereitumėte tiesiai prie rakto ar kelio.
Įjungę Live ryšį, sąveikaukite su puslapiu ir žiūrėkite pakeitimų žurnalą: kiekvienas įrašas rodo laiką ir aukščiausio lygio klavišus, kurie pasikeitė.
Įveskite veiksmą, pataisą arba argumentus kaip JSON ir paleiskite. Medis ir puslapis atnaujinami iš karto, todėl galite išbandyti krašto atvejus neliesdami kodo.
Copy state JSON užfiksuoja store tokią, kokia ji yra dabar, paruoštą įklijuoti į bilietą, bandymą ar palyginimo įrankį.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 74+ kūrėjų įrankius savo naršyklei.
