State Inspector najde stores Redux, Zustand, Pinia a Vuex na stránce, na které se nacházíte, zobrazí jejich stav jako živý strom a umožní vám odesílat akce, stav oprav nebo volat akce store bez otevření ladicího programu.
Chyby front-endu se velmi často vyskytují spíše ve stavu než v označení: vlajka, která se nikdy nepřeklopí, seznam obsahující zastaralou položku, objekt uživatele postrádající pole, které rozhraní očekává. Framework devtools to mohou zobrazit, ale pouze když je nainstalováno správné rozšíření, sestavení to odhalí a vy jste na počítači, kde můžete otevřít debugger. Na předváděcím místě, na notebooku kolegy nebo na produkční stránce to tak často není.
Tento nástroj čte stores přímo ze stránky. Redux lze nalézt prostřednictvím store react-redux hands jeho Provider, Pinia a Vuex prostřednictvím aplikace Vue, ve které jsou nainstalovány ( Vue 3 a Vue 2), a Zustand prostřednictvím store vystaveného na window nebo prostřednictvím komponent, které z něj čtou. Každý store je uveden s místem, kde byl nalezen, a jeho stav je zobrazen jako sbalitelný strom, který udržuje Maps, Sets, Dates, funkce a cyklické odkazy čitelné místo toho, aby se nezdařilo serializovat.
Live režim každé dvě sekundy znovu načte vybraný store, zvýrazní klávesy nejvyšší úrovně, které se změnily, a uchovává krátký protokol změn, takže můžete klikat po stránce a sledovat, které části stavu se jednotlivé interakce dotknou. Filtr najde jakýkoli klíč nebo cestu ve velkém stromu stavů a Copy state JSON vám poskytne snímek pro hlášení o chybě nebo testovací přípravek.
Když čtení nestačí, změňte jej na místě: odešlete akci Redux, sloučte objekt do stavu Zustand nebo zavolejte jednu z jeho akcí, $patch store Pinia nebo spusťte jeho akce s argumenty a potvrďte mutace nebo odešlete akce ve Vuex, včetně modulů se jmenným prostorem. Strom a stránka se okamžitě aktualizují. Nástroj je také jasný v tom, co nemůže dosáhnout: store držený uvnitř modulu a nikdy předaný rozhraní je neviditelný zvenčí a panel vysvětluje, jak ho vystavit během vývoje.
Redux a Redux Toolkit, Zustand, Pinia a Vuex na Vue 2 a Vue 3 byly nalezeny automaticky – žádné nastavení a žádný háček pro vývojové nástroje v sestavení.
Vnořený stav jako sbalitelný strom, který zpracovává Maps, Sets, Dates, funkce, instance tříd a kruhové odkazy, přičemž getry Pinia a Vuex jsou zobrazeny samostatně.
Live režim zvýrazňuje klíče nejvyšší úrovně, které se změnily, a zaznamenává každou změnu s časovým razítkem, takže můžete mapovat interakce na aktualizace stavu.
Odešlete akce Redux, volejte akce Zustand a Pinia s argumenty, $patch stav Pinia, sloučení do stavu Zustand a odevzdejte nebo odešlete ve Vuex.
Filtrujte velký stavový strom podle klíče nebo cesty a poté zkopírujte celý stav jako JSON pro hlášení o chybě, testovací přípravek nebo srovnání.
V aplikaci není třeba nic instalovat a není potřeba žádné sestavení ladění – funguje to na stagingu, produkci a na webech jiných lidí, ať jsou stores dostupné kdekoli.
Zkontrolujte, zda je chyba v datech nebo v pohledu: pokud store již obsahuje nesprávnou hodnotu, problém není v komponentě.
Uveďte store do stavu, který je obtížné dosáhnout kliknutím – prázdný košík, vypršená relace, tisíc položek – a uvidíte, jak si rozhraní poradí.
Přečtěte si živé stores nasazeného sestavení, kde nejsou připojeny Redux DevTools nebo Vue Devtools.
Proklikejte se aplikací a sledujte protokol změn, abyste zjistili, které interakce aktualizují kterou část stavu.
Přidejte přesný JSON snímek store do tiketu namísto popisu toho, co rozhraní ukázalo.
Klikněte na ikonu State Inspector v doku DevSuite Pro na stránce React nebo Vue. Každý store který najde, je uveden se svou knihovnou a kde byl nalezen.
Vyberte store, abyste viděli jeho stav jako strom. Rozbalte větve, které potřebujete, nebo zadejte filtr a přejděte přímo na klíč nebo cestu.
Se zapnutou funkcí Live komunikujte se stránkou a sledujte protokol změn: každý záznam zobrazuje čas a klávesy nejvyšší úrovně, které se změnily.
Zadejte akci, opravu nebo argumenty jako JSON a spusťte je. Strom a stránka se aktualizují okamžitě, takže můžete testovat okrajové případy, aniž byste se dotkli kódu.
Copy state JSON zachycuje store tak, jak je právě teď, připravený k vložení do tiketu, testu nebo nástroje pro porovnání.
Nainstalujte si DevSuite Pro zdarma a odemkněte 74+ vývojářských nástrojů pro svůj prohlížeč.
