State Inspector trouve les stores Redux, Zustand, Pinia et Vuex sur la page sur laquelle vous vous trouvez, affiche leur état sous forme d'arborescence dynamique et vous permet de distribuer des actions, de corriger l'état ou d'appeler des actions store sans ouvrir de débogueur.
Les bogues frontaux résident très souvent dans l'état plutôt que dans le balisage: un indicateur qui ne s'inverse jamais, une liste contenant un élément obsolète, un objet utilisateur manquant du champ attendu par l'interface. Les outils de développement du framework peuvent l'afficher, mais uniquement lorsque la bonne extension est installée, la construction l'expose et vous êtes sur une machine sur laquelle vous pouvez ouvrir un débogueur. Sur un site de staging, sur l'ordinateur portable d'un collègue ou sur une page de production, ce n'est souvent pas le cas.
Cet outil lit les stores directement à partir de la page. Redux se trouve via le store react-redux entre les mains de son Provider, Pinia et Vuex via l'application Vue dans laquelle ils sont installés ( Vue 3 et Vue 2), et Zustand via un store exposé sur window ou via les composants qui y lisent. Chaque store est répertorié avec l'endroit où il a été trouvé et son état est affiché sous la forme d'une arborescence pliable qui conserve Maps, Sets, Dates, les fonctions et les références circulaires lisibles au lieu d'échouer la sérialisation.
Le mode Live relit le store sélectionné toutes les deux secondes, met en évidence les touches de niveau supérieur qui ont changé et conserve un court journal des modifications, afin que vous puissiez cliquer sur la page et voir quelle partie de l'état touche chaque interaction. Un filtre trouve n'importe quelle clé ou chemin dans une grande arborescence d'états, et Copy state JSON vous donne un instantané pour un rapport de bogue ou un appareil de test.
Lorsque la lecture ne suffit pas, modifiez-la sur place: envoyez une action Redux, fusionnez un objet dans l'état Zustand ou appelez une de ses actions, $patch un store Pinia ou exécutez ses actions avec des arguments, et validez des mutations ou envoyez des actions dans Vuex, y compris les modules avec espace de noms. L'arborescence et la page sont mises à jour immédiatement. L'outil est également clair sur ce qu'il ne peut pas atteindre: un store conservé à l'intérieur d'un module et jamais remis à l'interface est invisible de l'extérieur, et le panneau explique comment en exposer un pendant le développement.
Redux et Redux Toolkit, Zustand, Pinia et Vuex sur Vue 2 et Vue 3, trouvés automatiquement - pas de configuration ni de hook devtools dans la build.
État imbriqué sous la forme d'une arborescence pliable qui gère Maps, Sets, Dates, fonctions, instances de classe et références circulaires, avec les getters Pinia et Vuex affichés séparément.
Le mode Live met en évidence les clés de niveau supérieur qui ont changé et enregistre chaque modification avec un horodatage, afin que vous puissiez mapper les interactions aux mises à jour d'état.
Distribuez les actions Redux, appelez les actions Zustand et Pinia avec des arguments, l'état $patch Pinia, fusionnez dans l'état Zustand et validez ou expédiez dans Vuex.
Filtrez une grande arborescence d'états par clé ou chemin, puis copiez l'intégralité de l'état au JSON pour un rapport de bug, un test ou une comparaison.
Rien à installer dans l'application et aucune version de débogage n'est nécessaire: cela fonctionne en préparation, en production et sur les sites d'autres personnes, partout où les stores sont accessibles.
Vérifiez si le bug est dans les données ou dans la vue: si le store contient déjà une mauvaise valeur, le composant n'est pas le problème.
Mettez le store dans un état difficile à atteindre en cliquant – un panier vide, une session expirée, un millier d’articles – et voyez comment l’interface s’en sort.
Lisez les stores en direct d'une version déployée où Redux DevTools ou Vue Devtools ne sont pas connectés.
Cliquez sur l'application et regardez le journal des modifications pour savoir quelles interactions mettent à jour quelle partie de l'état.
Ajoutez un instantané JSON exact du store au ticket au lieu de décrire ce que l'interface a montré.
Cliquez sur l'icône State Inspector dans le dock DevSuite Pro sur une page React ou Vue. Chaque store trouvé est répertorié avec sa bibliothèque et l'endroit où il a été trouvé.
Sélectionnez un store pour voir son état sous forme d'arborescence. Développez les branches dont vous avez besoin ou saisissez le filtre pour accéder directement à une clé ou à un chemin.
Avec Live activé, interagissez avec la page et regardez le journal des modifications: chaque entrée affiche l'heure et les touches de niveau supérieur qui ont changé.
Saisissez une action, un patch ou des arguments au format JSON et exécutez-le. L'arborescence et la page sont immédiatement mises à jour, vous pouvez donc tester les cas extrêmes sans toucher au code.
Copy state JSON capture le store tel qu'il est actuellement, prêt à être collé dans un ticket, un test ou un outil de comparaison.
Installez DevSuite Pro gratuitement et débloquez plus de 74 outils de développement pour votre navigateur.
