State Inspector troba les stores Redux, Zustand, Pinia i Vuex a la pàgina on esteu, mostra el seu estat com a arbre en directe i us permet enviar accions, aplicar l'estat o trucar accions store sense obrir un depurador.
Els errors de la portada sovint viuen en estat en lloc de marcat: una bandera que no gira mai, una llista amb un element obsolet, un objecte d'usuari que falta el camp que la interfície espera. Framework devtools pot mostrar-ho, però només quan s'instal·la l'extensió adequada, la compilació l'exposa i esteu en una màquina on podeu obrir un depurador. En un lloc de muntatge, l'ordinador portàtil d'un col·lega o una pàgina de producció, sovint no és així.
Aquesta eina llegeix les stores directament des de la pàgina. Redux es troba a través de la store react-redux mans al seu Provider, Pinia i Vuex a través de l'aplicació Vue on estan instal·lats ( Vue 3 i Vue 2), i Zustand a través d'una store exposada a window o a través dels components que llegeixen. Cada store s'indica amb el lloc on s'ha trobat i el seu estat es mostra com un arbre plegable que manté llegibles Maps, Sets, Dates, funcions i referències circulars en lloc de no poder serialitzar.
El mode Live torna a llegir la store seleccionada cada dos segons, ressalta les tecles de nivell superior que han canviat i manté un breu registre de canvis, de manera que podeu fer clic a la pàgina i veure quina part de l'estat toca cada interacció. Un filtre troba qualsevol clau o camí en un arbre d'estat gran, i Copy state JSON us ofereix una instantània per a un informe d'error o una instal·lació de prova.
Quan la lectura no és suficient, canvieu-la al seu lloc: envieu una acció Redux, fusioneu un objecte a l'estat Zustand o crideu una de les seves accions, $patch una store Pinia o executeu les seves accions amb arguments, i cometeu mutacions o envieu accions a Vuex, inclosos els mòduls amb espai de noms. L'arbre i la pàgina s'actualitzen immediatament. L'eina també té clar què no pot arribar: una store guardada dins d'un mòdul i mai entregada a la interfície és invisible des de fora, i el panell explica com exposar-ne una durant el desenvolupament.
Redux i Redux Toolkit, Zustand, Pinia i Vuex a Vue 2 i Vue 3, es troben automàticament: no hi ha cap configuració ni cap ganxo de devtools a la compilació.
Estat niat com un arbre plegable que gestiona Maps, Sets, Dates, funcions, instàncies de classe i referències circulars, amb els getters Pinia i Vuex mostrats per separat.
El mode Live destaca les tecles de nivell superior que han canviat i registra tots els canvis amb una marca de temps, de manera que podeu mapar les interaccions a les actualitzacions d'estat.
Envia accions Redux, crida a accions Zustand i Pinia amb arguments, $patch estat Pinia, fusiona a l'estat Zustand i confirma o envia a Vuex.
Filtreu un arbre d'estats gran per clau o camí i, a continuació, copieu l'estat sencer com JSON per a un informe d'error, una instal·lació de prova o una comparació.
No cal instal·lar res a l'aplicació i no es necessita cap compilació de depuració: funciona a la posada en escena, a la producció i als llocs d'altres persones, allà on es puguin accedir a les stores.
Comproveu si l'error es troba a les dades o a la vista: si la store ja té el valor incorrecte, el component no és el problema.
Col·loqueu la store en un estat difícil d'arribar fent clic (un carretó buit, una sessió caducada, mil articles) i mireu com funciona la interfície.
Llegiu les stores en directe d'una compilació desplegada on Redux DevTools o Vue Devtools no estan connectades.
Feu clic a l'aplicació i mireu el registre de canvis per saber quines interaccions actualitzen quina part de l'estat.
Afegiu una instantània JSON exacta de la store al bitllet en lloc de descriure què mostrava la interfície.
Feu clic a la icona State Inspector al moll DevSuite Pro en una pàgina React o Vue. Cada store que troba apareix amb la seva biblioteca i on es va trobar.
Seleccioneu una store per veure el seu estat com a arbre. Amplieu les branques que necessiteu o escriviu el filtre per saltar directament a una clau o camí.
Amb Live activat, interactueu amb la pàgina i mireu el registre de canvis: cada entrada mostra l'hora i les tecles de nivell superior que han canviat.
Introduïu una acció, un pedaç o arguments com JSON i executeu-lo. L'arbre i la pàgina s'actualitzen immediatament, de manera que podeu provar casos extrems sense tocar el codi.
Copy state JSON captura la store tal com està ara, a punt per enganxar-la a un bitllet, una prova o una eina de comparació.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 74 eines de desenvolupador per al teu navegador.
