State Inspector finder Redux, Zustand, Pinia og Vuex stores på den side, du er på, viser deres tilstand som et levende træ og lader dig sende handlinger, patch state eller kalde store uden at åbne en debugger.
Front-end-fejl lever meget ofte i tilstand snarere end i opmærkning: et flag, der aldrig vender, en liste med et gammelt element, et brugerobjekt, der mangler det felt, grænsefladen forventer. Framework devtools kan vise det, men kun når den rigtige udvidelse er installeret, afslører bygningen den, og du er på en maskine, hvor du kan åbne en debugger. På et iscenesættelsessted, en kollegas laptop eller en produktionsside er det ofte ikke tilfældet.
Dette værktøj læser stores direkte fra siden. Redux findes gennem store react-redux hænder til dens Provider, Pinia og Vuex gennem den Vue applikation, de er installeret i ( Vue 3 og Vue 2), og Zustand gennem en store, der er eksponeret på window eller gennem de komponenter, der læser fra den. Hver store er opført med, hvor den blev fundet, og dens tilstand vises som et sammenklappeligt træ, der holder Maps, Sets, Dates, funktioner og cirkulære referencer læsbare i stedet for at serialiseres.
Live tilstand genlæser den valgte store hvert andet sekund, fremhæver taster på øverste niveau, der ændrede sig, og fører en kort ændringslog, så du kan klikke rundt på siden og se, hvilken del af tilstanden hver interaktion berører. Et filter finder enhver nøgle eller sti i et stort tilstandstræ, og Copy state JSON giver dig et øjebliksbillede til en fejlrapport eller et testarmatur.
Når læsning ikke er nok, skal du ændre den på plads: afsend en Redux -handling, flet et objekt ind i Zustand tilstand eller kald en af dets handlinger, $patch en Pinia store eller kør dens handlinger med argumenter, og begå mutationer eller afsend handlinger i Vuex, inklusive navneafstandsmoduler. Træet og siden opdateres med det samme. Værktøjet er også klar over, hvad det ikke kan nå: En store der holdes inde i et modul og aldrig er afleveret til grænsefladen, er usynlig udefra, og panelet forklarer, hvordan man eksponerer en under udvikling.
Redux og Redux Toolkit, Zustand, Pinia og Vuex på Vue 2 og Vue 3, fundet automatisk - ingen opsætning og ingen devtools hook i bygningen.
Indlejret tilstand som et sammenklappeligt træ, der håndterer Maps, Sets, Dates, funktioner, klasseforekomster og cirkulære referencer, med Pinia og Vuex gettere vist separat.
Live tilstand fremhæver nøglerne på øverste niveau, der ændrede sig, og logger hver ændring med et tidsstempel, så du kan kortlægge interaktioner til tilstandsopdateringer.
Send Redux -handlinger, kald Zustand og Pinia -handlinger med argumenter, $patch Pinia -tilstand, flet ind i Zustand -tilstand og commit eller afsend i Vuex.
Filtrer et stort tilstandstræ efter nøgle eller sti, og kopier derefter hele tilstanden som JSON til en fejlrapport, et testarmatur eller en sammenligning.
Der er ikke noget at installere i appen, og der er ikke behov for fejlfinding – den fungerer på iscenesættelse, på produktion og på andres websteder, hvor end stores er tilgængelige.
Tjek, om fejlen er i dataene eller i visningen: Hvis store allerede har den forkerte værdi, er komponenten ikke problemet.
Sæt store i en tilstand, der er svær at nå ved at klikke - en tom vogn, en udløbet session, tusind varer - og se, hvordan grænsefladen klarer sig.
Læs live- stores i en implementeret build, hvor Redux DevTools eller Vue Devtools ikke er forbundet.
Klik gennem appen og se ændringsloggen for at lære, hvilke interaktioner der opdaterer hvilken del af staten.
Tilføj et nøjagtigt JSON øjebliksbillede af store til billetten i stedet for at beskrive, hvad grænsefladen viste.
Klik på State Inspector ikonet i DevSuite Pro dockingstationen på en React eller Vue -side. Hver store den finder, er opført med dens bibliotek, og hvor den blev fundet.
Vælg en store for at se dens tilstand som et træ. Udvid de grene, du har brug for, eller skriv i filteret for at hoppe direkte til en nøgle eller sti.
Med Live slået til, interager med siden og se ændringsloggen: hver post viser tidspunktet og de øverste taster, der ændrede sig.
Indtast en handling, en patch eller argumenter som JSON og kør den. Træet og siden opdateres med det samme, så du kan teste kantsager uden at røre ved koden.
Copy state JSON fanger store, som den er lige nu, klar til at indsætte i en billet, en test eller et sammenligningsværktøj.
Installer DevSuite Pro gratis og lås op for 74+ udviklerværktøjer til din browser.
