State Inspector hittar Redux, Zustand, Pinia och Vuex stores på sidan du är på, visar deras tillstånd som ett levande träd och låter dig skicka åtgärder, korrigera tillstånd eller anropa store utan att öppna en debugger.
Front-end-buggar lever ofta i tillstånd snarare än i uppmärkning: en flagga som aldrig vänder, en lista som innehåller ett inaktuellt objekt, ett användarobjekt som saknar det fält som gränssnittet förväntar sig. Framework devtools kan visa det, men bara när rätt tillägg är installerat, exponerar byggnaden det och du är på en maskin där du kan öppna en debugger. På en iscensättningsplats, en kollegas laptop eller en produktionssida är det ofta inte fallet.
Detta verktyg läser stores direkt från sidan. Redux hittas genom store react-redux händer till sin Provider, Pinia och Vuex genom Vue applikationen de är installerade i ( Vue 3 och Vue 2), och Zustand genom en store exponerad på window eller genom komponenterna som läser från den. Varje store är listad med var den hittades, och dess tillstånd visas som ett hopfällbart träd som håller Maps, Sets, Dates, funktioner och cirkulära referenser läsbara istället för att misslyckas med att serialisera.
Live läget läser om den valda store varannan sekund, markerar tangenterna på översta nivån som ändrades och håller en kort ändringslogg, så att du kan klicka dig runt på sidan och se vilken del av tillståndet varje interaktion berör. Ett filter hittar valfri nyckel eller sökväg i ett stort tillståndsträd, och Copy state JSON ger dig en ögonblicksbild för en felrapport eller en testfixtur.
När läsning inte räcker, ändra den på plats: skicka en Redux -åtgärd, slå samman ett objekt till Zustand tillstånd eller anropa en av dess åtgärder, $patch en Pinia store eller kör dess åtgärder med argument och utför mutationer eller skicka åtgärder i Vuex, inklusive namnavgränsade moduler. Trädet och sidan uppdateras omedelbart. Verktyget är också tydligt med vad det inte kan nå: en store som hålls inuti en modul och aldrig lämnas till gränssnittet är osynlig utifrån, och panelen förklarar hur man exponerar en under utveckling.
Redux och Redux Toolkit, Zustand, Pinia och Vuex på Vue 2 och Vue 3, hittas automatiskt - ingen installation och ingen devtools-krok i bygget.
Kapslat tillstånd som ett hopfällbart träd som hanterar Maps, Sets, Dates, funktioner, klassinstanser och cirkulära referenser, med Pinia och Vuex -getters som visas separat.
Live läge framhäver nycklarna på översta nivån som ändrades och loggar varje förändring med en tidsstämpel, så att du kan mappa interaktioner till tillståndsuppdateringar.
Skicka Redux -åtgärder, anrop Zustand och Pinia -åtgärder med argument, $patch Pinia -tillstånd, slå samman till Zustand tillstånd och commit eller skicka i Vuex.
Filtrera ett stort tillståndsträd efter nyckel eller sökväg, kopiera sedan hela tillståndet som JSON för en felrapport, en testfixtur eller en jämförelse.
Inget att installera i appen och ingen felsökning behövs – den fungerar på iscensättning, på produktion och på andras webbplatser, varhelst stores är tillgängliga.
Kontrollera om buggen finns i data eller i vyn: om store redan har fel värde är det inte komponenten som är problemet.
Sätt store i ett tillstånd som är svårt att nå genom att klicka - en tom varukorg, en utgången session, tusen artiklar - och se hur gränssnittet klarar sig.
Läs stores för en distribuerad version där Redux DevTools eller Vue Devtools inte är anslutna.
Klicka dig igenom appen och titta på ändringsloggen för att lära dig vilka interaktioner som uppdaterar vilken del av staten.
Lägg till en exakt JSON ögonblicksbild av store till biljetten istället för att beskriva vad gränssnittet visade.
Klicka på ikonen State Inspector i DevSuite Pro -dockan på en React eller Vue sida. Varje store den hittar är listad med dess bibliotek och var den hittades.
Välj en store för att se dess tillstånd som ett träd. Expandera grenarna du behöver, eller skriv i filtret för att hoppa direkt till en nyckel eller sökväg.
Med Live påslaget, interagera med sidan och titta på ändringsloggen: varje post visar tiden och tangenterna på översta nivån som ändrades.
Ange en åtgärd, en patch eller argument som JSON och kör den. Trädet och sidan uppdateras direkt, så att du kan testa kantfall utan att röra koden.
Copy state JSON fångar store som den är just nu, redo att klistra in i en biljett, ett test eller ett jämförelseverktyg.
Installera DevSuite Pro gratis och lås upp 74+ utvecklarverktyg för din webbläsare.
