State Inspector pronalazi stores Redux, Zustand, Pinia i Vuex na stranici na kojoj se nalazite, prikazuje njihovo stanje kao živo stablo i omogućuje vam slanje radnji, stanje zakrpa ili pozivanje radnji store bez otvaranja programa za ispravljanje pogrešaka.
Front-end bugovi vrlo često žive u stanju, a ne u markupu: zastavica koja se nikada ne okreće, popis koji sadrži ustajalu stavku, korisničkom objektu nedostaje polje koje sučelje očekuje. Framework devtools to može pokazati, ali samo kada je instalirano pravo proširenje, međugradnja ga izlaže i nalazite se na stroju na kojem možete otvoriti debugger. Na stranici za prikazivanje, laptopu kolega ili produkcijskoj stranici, to često nije slučaj.
Ovaj alat čita stores izravno sa stranice. Redux se pronalazi kroz store react-redux predaje svom Provider, Pinia i Vuex kroz Vue aplikaciju u koju su instalirani ( Vue 3 i Vue 2), a Zustand kroz store izloženu na window ili kroz komponente koje čitaju iz njega. Svaka store navedena je s mjestom na kojem je pronađena, a njezino stanje prikazano je kao sklopivo stablo koje Maps, Sets, Dates, funkcije i kružne reference održava čitljivima umjesto da ih serijalizira.
Način Live ponovno čita odabranu store svake dvije sekunde, ističe ključeve najviše razine koji su se promijenili i vodi kratki zapisnik promjena, tako da možete klikati po stranici i gledati koji dio stanja svaka interakcija dodiruje. Filtar pronalazi bilo koji ključ ili put u velikom stablu stanja, a Copy state JSON daje vam snimku za izvješće o pogrešci ili test fixture.
Kada čitanje nije dovoljno, promijenite ga na mjestu: pošaljite Redux radnju, spojite objekt u stanje Zustand ili pozovite jednu od njegovih radnji, $patch Pinia store ili pokrenite njegove radnje s argumentima i izvršite mutacije ili pošaljite akcije u Vuex, uključujući module s prostorom imena. Stablo i stranica ažuriraju se odmah. Alat također jasno zna što ne može doseći: store koja se čuva unutar modula i nikada ne predaje sučelju nevidljiva je izvana, a ploča objašnjava kako je izložiti tijekom razvoja.
Redux i Redux Toolkit, Zustand, Pinia i Vuex na Vue 2 i Vue 3, pronađeni automatski — bez postavljanja i bez devtools kuka u build.
Ugniježđeno stanje kao sklopivo stablo koje rukuje Maps, Sets, Dates, funkcijama, instancama klasa i kružnim referencama, s Pinia i Vuex getterima prikazanim odvojeno.
Live način rada ističe ključeve najviše razine koji su se promijenili i bilježi svaku promjenu s vremenskom oznakom, tako da možete preslikati interakcije na ažuriranja stanja.
Slanje Redux radnji, pozivanje Zustand i Pinia akcija s argumentima, $patch Pinia stanje, spajanje u Zustand stanje i predaja ili slanje u Vuex.
Filtrirajte veliko stablo stanja prema ključu ili putanji, zatim kopirajte cijelo stanje kao JSON za izvješće o pogrešci, testnu postavku ili usporedbu.
U aplikaciji se ništa ne može instalirati i nije potrebna nikakva izgradnja za otklanjanje pogrešaka — radi na inscenaciji, u produkciji i na tuđim stranicama, gdje god su stores dostupne.
Provjerite je li pogreška u podacima ili u prikazu: ako store već sadrži pogrešnu vrijednost, komponenta nije problem.
Stavite store u stanje do kojeg je teško doći klikom — prazna košarica, istekla sesija, tisuću artikala — i pogledajte kako se sučelje nosi.
Pročitajte stores uživo implementirane verzije gdje Redux DevTools ili Vue Devtools nisu povezani.
Kliknite kroz aplikaciju i pogledajte zapisnik promjena kako biste saznali koje interakcije ažuriraju koji dio stanja.
Dodajte točnu JSON snimku store u kartu umjesto opisa onoga što je sučelje pokazalo.
Kliknite ikonu State Inspector u DevSuite Pro docku na React ili Vue stranici. Svaka store koju pronađe navedena je sa svojom knjižnicom i mjestom gdje je pronađena.
Odaberite store da vidite njeno stanje kao stablo. Proširite grane koje trebate ili upišite filtar da skočite ravno na ključ ili stazu.
S uključenim Live, komunicirajte sa stranicom i gledajte zapisnik promjena: svaki unos prikazuje vrijeme i ključeve najviše razine koji su se promijenili.
Unesite akciju, zakrpu ili argumente kao JSON i pokrenite je. Stablo i stranica ažuriraju se odmah, tako da možete testirati rubne slučajeve bez diranja koda.
Copy state JSON bilježi store kakva je upravo sada, spremnu za lijepljenje u kartu, test ili alat za usporedbu.
Instalirajte DevSuite Pro besplatno i otključajte 74+ razvojnih alata za svoj preglednik.
