State Inspector finner Redux, Zustand, Pinia og Vuex stores på siden du er på, viser statusen deres som et levende tre, og lar deg sende handlinger, patch state eller kalle store uten å åpne en debugger.
Front-end-feil lever ofte i tilstand i stedet for i markering: et flagg som aldri snur, en liste som inneholder et gammelt element, et brukerobjekt som mangler feltet grensesnittet forventer. Framework devtools kan vise det, men bare når den riktige utvidelsen er installert, avslører bygningen den og du er på en maskin hvor du kan åpne en debugger. På en iscenesettelsesside, en kollegas laptop eller en produksjonsside er det ofte ikke tilfelle.
Dette verktøyet leser stores rett fra siden. Redux blir funnet gjennom store react-redux hender til Provider, Pinia og Vuex gjennom Vue applikasjonen de er installert i ( Vue 3 og Vue 2), og Zustand gjennom en store eksponert på window eller gjennom komponentene som leser fra den. Hver store er oppført med hvor den ble funnet, og statusen vises som et sammenleggbart tre som holder Maps, Sets, Dates, funksjoner og sirkulære referanser lesbare i stedet for å unnlate å serialisere.
Live modus leser den valgte store på nytt hvert annet sekund, fremhever toppnivåtastene som endret seg og fører en kort endringslogg, slik at du kan klikke deg rundt på siden og se hvilken del av tilstanden hver interaksjon berører. Et filter finner hvilken som helst nøkkel eller bane i et stort tilstandstre, og Copy state JSON gir deg et øyeblikksbilde for en feilrapport eller en testarmatur.
Når lesing ikke er nok, endre den på plass: send en Redux -handling, slå sammen et objekt til Zustand tilstand eller kall en av handlingene, $patch en Pinia store eller kjør handlingene med argumenter, og begå mutasjoner eller send handlinger i Vuex, inkludert navneavstandsmoduler. Treet og siden oppdateres umiddelbart. Verktøyet er også tydelig på hva det ikke kan nå: en store som holdes inne i en modul og aldri leveres til grensesnittet er usynlig utenfra, og panelet forklarer hvordan man eksponerer en under utvikling.
Redux og Redux Toolkit, Zustand, Pinia og Vuex på Vue 2 og Vue 3, funnet automatisk - ingen oppsett og ingen devtools-krok i bygget.
Nestet tilstand som et sammenleggbart tre som håndterer Maps, Sets, Dates, funksjoner, klasseforekomster og sirkulære referanser, med Pinia og Vuex gettere vist separat.
Live modus fremhever toppnivånøklene som ble endret og logger hver endring med et tidsstempel, slik at du kan kartlegge interaksjoner til tilstandsoppdateringer.
Send Redux -handlinger, ring Zustand og Pinia -handlinger med argumenter, $patch Pinia tilstand, slå sammen til Zustand tilstand, og forplikt eller send i Vuex.
Filtrer et stort tilstandstre etter nøkkel eller bane, og kopier deretter hele tilstanden som JSON for en feilrapport, en testarmatur eller en sammenligning.
Ingenting å installere i appen og ingen feilsøkingsbygg er nødvendig – det fungerer på iscenesettelse, på produksjon og på andres nettsteder, uansett hvor stores er tilgjengelige.
Sjekk om feilen er i dataene eller i visningen: hvis store allerede har feil verdi, er ikke komponenten problemet.
Sett store i en tilstand som er vanskelig å nå ved å klikke - en tom handlekurv, en utløpt økt, tusen varer - og se hvordan grensesnittet takler det.
Les live- stores til en distribuert build der Redux DevTools eller Vue Devtools ikke er tilkoblet.
Klikk gjennom appen og se endringsloggen for å finne ut hvilke interaksjoner som oppdaterer hvilken del av staten.
Legg til et nøyaktig JSON øyeblikksbilde av store til billetten i stedet for å beskrive hva grensesnittet viste.
Klikk på State Inspector ikonet i DevSuite Pro -dokken på en React eller Vue -side. Hver store den finner er oppført med biblioteket og hvor den ble funnet.
Velg en store for å se statusen som et tre. Utvid grenene du trenger, eller skriv inn filteret for å hoppe rett til en nøkkel eller bane.
Med Live slått på, samhandle med siden og se endringsloggen: hver oppføring viser klokkeslettet og toppnivåtastene som endret seg.
Skriv inn en handling, en oppdatering eller argumenter som JSON og kjør den. Treet og siden oppdateres umiddelbart, slik at du kan teste kantsaker uten å berøre koden.
Copy state JSON fanger opp store slik den er akkurat nå, klar til å limes inn i en billett, en test eller et sammenligningsverktøy.
Installer DevSuite Pro gratis og lås opp 74+ utviklerverktøy for nettleseren din.
