State Inspector megtalálja a Redux, Zustand, Pinia és Vuex stores azon az oldalon, amelyen éppen tartózkodik, állapotukat élő faként jeleníti meg, és lehetővé teszi a műveletek, a javítási állapotok vagy store műveletek felhívását hibakereső megnyitása nélkül.
A front-end hibák nagyon gyakran állapotban, nem pedig jelölésben élnek: egy zászló, amely soha nem fordul át, egy elavult elemet tartalmazó lista, egy felhasználói objektum hiányzik a felület által várt mezőről. A Framework devtools képes megmutatni, de csak a megfelelő bővítmény telepítése után a build kiteszi azt, és egy gépen vagy, ahol megnyithatsz egy hibakeresőt. Egy színpadi helyszínen, egy kolléga laptopján vagy egy produkciós oldalon ez gyakran nem így van.
Ez az eszköz közvetlenül az oldalról olvassa be az stores. Redux az store react-redux kezein keresztül érhető el Provider, Pinia és Vuex a Vue alkalmazáson keresztül, amelybe telepítve vannak ( Vue 3 és Vue 2), Zustand pedig egy window kihelyezett store vagy az abból olvasó komponenseken keresztül. Az egyes store listája a megtalálás helyével együtt jelenik meg, állapota pedig összecsukható faként jelenik meg, amely Maps, Sets, Dates, függvények és körkörös hivatkozások olvashatóságát tartja a sorosozás sikertelensége helyett.
Live mód két másodpercenként újraolvassa a kiválasztott store, kiemeli a legfelső szintű gombokat, amelyek megváltoztak, és rövid változásnaplót vezet, így körbejárhatja az oldalt, és megnézheti, hogy az állapot mely részét érintik az egyes interakciók. A szűrő bármely kulcsot vagy elérési utat megkeres egy nagy állapotfában, Copy state JSON pedig pillanatképet ad a hibajelentéshez vagy egy teszteszközhöz.
Ha az olvasás nem elég, változtassa meg a helyén: küldjön el egy Redux -műveletet, egyesítsen egy objektumot Zustand állapotba, vagy hívja meg az egyik műveletét, $patch egy Pinia store vagy futtassa a műveleteit argumentumokkal, és hajtson végre mutációkat vagy küldjön műveleteket Vuex, beleértve a névteres modulokat is. A fa és az oldal azonnal frissül. Az eszköznek az is világos, hogy mit nem tud elérni: a modulban tárolt és a felülethez soha nem adott store kívülről láthatatlan, a panel pedig elmagyarázza, hogyan lehet kitenni egyet a fejlesztés során.
Redux és Redux Toolkit, Zustand, Pinia és Vuex Vue 2 és Vue 3 rendszeren automatikusan megtalálható – nincs beállítás és nincs devtools hook a buildben.
Beágyazott állapot összecsukható faként, amely kezeli Maps, Sets, Dates, függvényeket, osztálypéldányokat és körkörös hivatkozásokat, Pinia és Vuex getterekkel külön-külön.
Live mód kiemeli a legfelső szintű billentyűket, amelyek megváltoztak, és minden változást időbélyeggel naplóz, így az interakciókat leképezheti az állapotfrissítésekre.
Redux műveletek küldése, Zustand és Pinia műveletek meghívása argumentumokkal, $patch Pinia állapot, egyesülés Zustand állapotba, és véglegesítés vagy elküldés Vuex.
Szűrjön egy nagy állapotfát kulcs vagy elérési út alapján, majd másolja a teljes állapotot JSON ként hibajelentéshez, teszteszközhöz vagy összehasonlításhoz.
Semmit sem kell telepíteni az alkalmazásba, és nincs szükség hibakereső buildre – működik a stádiumban, az éles környezetben és mások webhelyein, ahol az stores elérhetők.
Ellenőrizze, hogy a hiba az adatokban vagy a nézetben van-e: ha az store már rossz értéket tartalmaz, akkor nem az összetevővel van a probléma.
Állítsa az store kattintással nehezen elérhető állapotba – üres kosár, lejárt munkamenet, ezer termék –, és nézze meg, hogyan birkózik meg a felület.
Olvassa el a telepített build élő stores, ahol Redux DevTools vagy Vue Devtools nincs csatlakoztatva.
Kattintson az alkalmazásra, és nézze meg a változásnaplót, hogy megtudja, mely interakciók frissítik az állapot melyik részét.
Adjon hozzá egy pontos JSON pillanatképet az store a jegyhez ahelyett, hogy leírná, mit mutatott a felület.
Kattintson a State Inspector ikonra a DevSuite Pro dokkban egy React vagy Vue oldalon. Minden megtalált store fel van sorolva a könyvtárával és a megtalálási helyével együtt.
Válasszon ki egy store, hogy az állapotát faként lássa. Bontsa ki a szükséges ágakat, vagy írja be a szűrőt, hogy közvetlenül egy kulcsra vagy elérési útra ugorjon.
Ha Live be van kapcsolva, lépjen kapcsolatba az oldallal, és nézze meg a változásnaplót: minden bejegyzés megmutatja az időt és a legfelső szintű gombokat, amelyek megváltoztak.
Adjon meg egy műveletet, egy javítást vagy argumentumokat JSON ként, és futtassa. A fa és az oldal azonnal frissül, így a kód érintése nélkül tesztelheti az éles eseteket.
Copy state JSON rögzíti az store a jelenlegi állapotában, készen arra, hogy jegybe, tesztbe vagy összehasonlító eszközbe illessze be.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 74+ fejlesztői eszközt böngészőjéhez.
