State Inspector trova gli stores Redux, Zustand, Pinia e Vuex nella pagina in cui ti trovi, mostra il loro stato come un albero attivo e ti consente di inviare azioni, applicare patch allo stato o chiamare azioni store senza aprire un debugger.
I bug del front-end molto spesso risiedono nello stato piuttosto che nel markup: un flag che non si capovolge mai, un elenco che contiene un elemento obsoleto, un oggetto utente a cui manca il campo previsto dall'interfaccia. Gli sviluppatori del framework possono mostrarlo, ma solo quando è installata l'estensione corretta, la build la espone e ci si trova su una macchina in cui è possibile aprire un debugger. Su un sito di staging, sul laptop di un collega o su una pagina di produzione, spesso non è così.
Questo strumento legge i stores direttamente dalla pagina. Redux si trova attraverso il store react-redux consegnato al suo Provider, Pinia e Vuex attraverso l'applicazione Vue in cui sono installati ( Vue 3 e Vue 2), e Zustand attraverso un store esposto sulla window o attraverso i componenti che leggono da esso. Ogni store è elencato con dove è stato trovato e il suo stato è mostrato come un albero comprimibile che mantiene leggibili Maps, Sets, Dates, funzioni e riferimenti circolari invece di non riuscire a serializzare.
La modalità Live rilegge il store selezionato ogni due secondi, evidenzia i tasti di livello superiore che sono stati modificati e mantiene un breve registro delle modifiche, così puoi fare clic sulla pagina e osservare quale parte dello stato tocca ciascuna interazione. Un filtro trova qualsiasi chiave o percorso in un albero di stati di grandi dimensioni e Copy state JSON fornisce un'istantanea per una segnalazione di bug o un dispositivo di test.
Quando la lettura non è sufficiente, modificala sul posto: invia un'azione Redux, unisci un oggetto nello stato Zustand o chiama una delle sue azioni, $patch un store Pinia o esegui le sue azioni con argomenti e commetti mutazioni o invia azioni in Vuex, inclusi i moduli con spazi dei nomi. L'albero e la pagina si aggiornano immediatamente. Lo strumento è chiaro anche su ciò che non può raggiungere: un store tenuto all'interno di un modulo e mai passato all'interfaccia è invisibile dall'esterno, e il pannello spiega come esporne uno durante lo sviluppo.
Redux e Redux Toolkit, Zustand, Pinia e Vuex su Vue 2 e Vue 3, trovati automaticamente: nessuna configurazione e nessun aggancio di devtools nella build.
Stato annidato come albero comprimibile che gestisce Maps, Sets, Dates, funzioni, istanze di classi e riferimenti circolari, con getter Pinia e Vuex mostrati separatamente.
La modalità Live evidenzia le chiavi di livello superiore che sono state modificate e registra ogni modifica con un timestamp, in modo da poter mappare le interazioni sugli aggiornamenti di stato.
Invia azioni Redux, chiama azioni Zustand e Pinia con argomenti, stato $patch Pinia, unisciti allo stato Zustand e esegui il commit o l'invio in Vuex.
Filtra un albero di stati di grandi dimensioni per chiave o percorso, quindi copia l'intero stato come JSON per una segnalazione di bug, un dispositivo di test o un confronto.
Niente da installare nell'app e nessuna build di debug necessaria: funziona in staging, in produzione e sui siti di altre persone, ovunque siano raggiungibili i stores.
Controlla se il bug è nei dati o nella vista: se lo store contiene già il valore sbagliato, il problema non è il componente.
Metti il store in uno stato difficile da raggiungere con un clic (un carrello vuoto, una sessione scaduta, mille articoli) e guarda come se la cava l'interfaccia.
Leggere gli stores live di una build distribuita in cui Redux DevTools o Vue Devtools non sono connessi.
Fai clic sull'app e guarda il registro delle modifiche per scoprire quali interazioni aggiornano quale parte dello stato.
Aggiungi un'esatta istantanea JSON del store al ticket invece di descrivere cosa ha mostrato l'interfaccia.
Fai clic sull'icona State Inspector nel dock DevSuite Pro su una pagina React o Vue. Ogni store trovato viene elencato con la sua libreria e dove è stato trovato.
Seleziona un store per visualizzarne lo stato come un albero. Espandi i rami che ti servono oppure digita il filtro per passare direttamente a una chiave o a un percorso.
Con Live acceso, interagisci con la pagina e guarda il registro delle modifiche: ogni voce mostra l'ora e le chiavi di primo livello che sono cambiate.
Inserisci un'azione, una patch o argomenti come JSON ed eseguila. L'albero e la pagina si aggiornano immediatamente, così puoi testare i casi limite senza toccare il codice.
Copy state JSON cattura il store così com'è in questo momento, pronto per essere incollato in un ticket, in un test o in uno strumento di confronto.
Installa DevSuite Pro gratuitamente e sblocca più di 74 strumenti per sviluppatori per il tuo browser.
