State Inspector vindt de Redux, Zustand, Pinia en Vuex stores op de pagina waarop u zich bevindt, toont hun status als een live boom en laat u acties verzenden, de status patchen of store oproepen zonder een debugger te openen.
Front-end bugs leven vaak in de staat in plaats van in de opmaak: een vlag die nooit omdraait, een lijst met een oud item, een gebruikersobject dat het veld mist dat de interface verwacht. Framework devtools kan het weergeven, maar alleen als de juiste extensie is geïnstalleerd, de build deze openbaar maakt en u zich op een machine bevindt waarop u een debugger kunt openen. Op een stagingsite, de laptop van een collega of een productiepagina is dat vaak niet het geval.
Deze tool leest de stores rechtstreeks vanaf de pagina. Redux wordt gevonden via de store react-redux handen aan zijn Provider, Pinia en Vuex via de Vue applicatie waarin ze zijn geïnstalleerd ( Vue 3 en Vue 2), en Zustand via een store die wordt weergegeven op window of via de componenten die ervan lezen. Van elke store wordt vermeld waar deze is gevonden, en de status ervan wordt weergegeven als een opvouwbare boomstructuur die ervoor zorgt dat Maps, Sets, Dates, functies en kringverwijzingen leesbaar blijven in plaats van dat ze niet kunnen worden geserialiseerd.
Live modus leest de geselecteerde store elke twee seconden opnieuw, markeert de toetsen op het hoogste niveau die zijn gewijzigd en houdt een kort wijzigingslogboek bij, zodat u rond de pagina kunt klikken en kunt zien welk deel van de status elke interactie raakt. Een filter vindt elke sleutel of elk pad in een grote statusboom, en Copy state JSON geeft u een momentopname voor een bugrapport of een testopstelling.
Als lezen niet genoeg is, verander het dan op zijn plaats: verzend een Redux -actie, voeg een object samen in Zustand status of roep een van zijn acties aan, $patch een Pinia store of voer zijn acties uit met argumenten, en voer mutaties uit of verzend acties in Vuex, inclusief naamruimte-modules. De boom en de pagina worden onmiddellijk bijgewerkt. De tool is ook duidelijk over wat hij niet kan bereiken: een store die in een module wordt bewaard en nooit aan de interface wordt doorgegeven, is van buitenaf onzichtbaar, en het paneel legt uit hoe je deze tijdens de ontwikkeling kunt blootleggen.
Redux en Redux Toolkit, Zustand, Pinia en Vuex op Vue 2 en Vue 3, automatisch gevonden - geen installatie en geen devtools die in de build zijn opgenomen.
Geneste status als een opvouwbare boom die Maps, Sets, Dates, functies, klasse-instanties en cirkelreferenties verwerkt, waarbij Pinia en Vuex getters afzonderlijk worden weergegeven.
Live modus markeert de sleutels op het hoogste niveau die zijn gewijzigd en registreert elke wijziging met een tijdstempel, zodat u interacties kunt toewijzen aan statusupdates.
Verzend Redux acties, roep Zustand en Pinia acties aan met argumenten, $patch Pinia -status, voeg deze samen in de Zustand status en commit of verzend in Vuex.
Filter een grote statusboom op sleutel of pad en kopieer vervolgens de hele status als JSON voor een bugrapport, een testopstelling of een vergelijking.
Er hoeft niets in de app te worden geïnstalleerd en er is geen debug-build nodig: het werkt op de staging, op de productie en op de sites van anderen, waar de stores ook bereikbaar zijn.
Controleer of de bug in de gegevens of in de weergave zit: als de store al de verkeerde waarde bevat, is het onderdeel niet het probleem.
Breng de store in een staat die moeilijk te bereiken is door te klikken (een leeg winkelwagentje, een verlopen sessie, duizend items) en kijk hoe de interface ermee omgaat.
Lees de live stores van een geïmplementeerde build waarbij Redux DevTools of Vue Devtools niet zijn verbonden.
Klik door de app en bekijk het wijzigingslogboek om te zien welke interacties welk deel van de staat updaten.
Voeg een exacte JSON momentopname van de store toe aan het ticket in plaats van te beschrijven wat de interface liet zien.
Klik op het State Inspector pictogram in het DevSuite Pro dock op een React of Vue pagina. Elke store die wordt gevonden, wordt vermeld met de bijbehorende bibliotheek en waar deze is gevonden.
Selecteer een store om de status ervan als een boom te bekijken. Vouw de vertakkingen uit die je nodig hebt, of typ het filter om rechtstreeks naar een sleutel of pad te springen.
Als Live is ingeschakeld, kunt u communiceren met de pagina en het wijzigingslogboek bekijken: elk item toont de tijd en de toetsen op het hoogste niveau die zijn gewijzigd.
Voer een actie, een patch of argumenten in als JSON en voer deze uit. De boomstructuur en de pagina worden meteen bijgewerkt, zodat u randgevallen kunt testen zonder de code aan te raken.
Copy state JSON legt de store vast zoals deze nu is, klaar om in een ticket, een test of een vergelijkingstool te plakken.
Installeer DevSuite Pro gratis en ontgrendel 74+ ontwikkelaarstools voor uw browser.
