State Inspector encontra as stores Redux, Zustand, Pinia e Vuex na página em que você está, mostra seu estado como uma árvore ativa e permite despachar ações, corrigir estado ou chamar ações store sem abrir um depurador.
Os bugs de front-end muitas vezes residem no estado e não na marcação: um sinalizador que nunca muda, uma lista contendo um item obsoleto, um objeto de usuário sem o campo que a interface espera. Os devtools do Framework podem mostrá-lo, mas somente quando a extensão correta é instalada, a compilação a expõe e você está em uma máquina onde pode abrir um depurador. Em um site de teste, no laptop de um colega ou em uma página de produção, esse geralmente não é o caso.
Essa ferramenta lê as stores direto da página. Redux é encontrado através da store react-redux entregue ao seu Provider, Pinia e Vuex através da aplicação Vue em que estão instalados ( Vue 3 e Vue 2), e Zustand através de uma store exposta na window ou através dos componentes que a leem. Cada store é listada com onde foi encontrada e seu estado é mostrado como uma árvore dobrável que mantém Maps, Sets, Dates, funções e referências circulares legíveis em vez de falhar na serialização.
O modo Live relê a store selecionada a cada dois segundos, destaca as chaves de nível superior que foram alteradas e mantém um breve registro de alterações, para que você possa clicar na página e observar qual parte do estado cada interação toca. Um filtro encontra qualquer chave ou caminho em uma grande árvore de estado, e Copy state JSON fornece um instantâneo para um relatório de bug ou um dispositivo de teste.
Quando a leitura não for suficiente, altere-a: despache uma ação Redux, mescle um objeto no estado Zustand ou chame uma de suas ações, $patch uma store Pinia ou execute suas ações com argumentos e confirme mutações ou despache ações em Vuex, incluindo módulos com namespace. A árvore e a página são atualizadas imediatamente. A ferramenta também é clara sobre o que não pode alcançar: uma store mantida dentro de um módulo e nunca entregue à interface é invisível de fora, e o painel explica como expô-la durante o desenvolvimento.
Redux e Redux Toolkit, Zustand, Pinia e Vuex no Vue 2 e Vue 3, encontrados automaticamente - sem configuração e sem gancho de devtools na compilação.
Estado aninhado como uma árvore dobrável que lida com Maps, Sets, Dates, funções, instâncias de classe e referências circulares, com getters Pinia e Vuex mostrados separadamente.
O modo Live destaca as chaves de nível superior que foram alteradas e registra cada alteração com um carimbo de data/hora, para que você possa mapear interações para atualizações de estado.
Despache ações Redux, chame ações Zustand e Pinia com argumentos, $patch estado Pinia, mescle no estado Zustand e confirme ou despache em Vuex.
Filtre uma grande árvore de estados por chave ou caminho e copie todo o estado como JSON para um relatório de bug, um dispositivo de teste ou uma comparação.
Não há nada para instalar no aplicativo e nenhuma compilação de depuração necessária - ele funciona na preparação, na produção e em sites de outras pessoas, onde quer que as stores estejam acessíveis.
Verifique se o bug está nos dados ou na visualização: se a store já contém o valor errado, o componente não é o problema.
Coloque a store em um estado difícil de alcançar clicando – um carrinho vazio, uma sessão expirada, mil itens – e veja como a interface funciona.
Leia os stores ativos de uma compilação implantada onde Redux DevTools ou Vue Devtools não estão conectados.
Clique no aplicativo e assista ao log de alterações para saber quais interações atualizam qual parte do estado.
Adicione um instantâneo JSON exato da store ao ticket em vez de descrever o que a interface mostrou.
Clique no ícone State Inspector no dock do DevSuite Pro em uma página React ou Vue. Cada store encontrada é listada com sua biblioteca e onde foi encontrada.
Selecione uma store para ver seu estado como uma árvore. Expanda as ramificações necessárias ou digite o filtro para ir direto para uma chave ou caminho.
Com Live ativado, interaja com a página e observe o log de alterações: cada entrada mostra a hora e as chaves de nível superior que foram alteradas.
Insira uma ação, patch ou argumentos como JSON e execute-o. A árvore e a página são atualizadas imediatamente, para que você possa testar casos extremos sem tocar no código.
Copy state JSON captura a store como ela está agora, pronta para ser colada em um ticket, teste ou ferramenta de comparação.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 74 ferramentas de desenvolvedor para seu navegador.
