State Inspector findet die stores Redux, Zustand, Pinia und Vuex auf der Seite, auf der Sie sich befinden, zeigt ihren Status als Live-Baum an und ermöglicht Ihnen das Versenden von Aktionen, das Patchen des Status oder das Aufrufen store Aktionen, ohne einen Debugger zu öffnen.
Front-End-Fehler liegen sehr oft im Status und nicht im Markup: ein Flag, das nie umkippt, eine Liste mit einem veralteten Element, ein Benutzerobjekt, dem das von der Schnittstelle erwartete Feld fehlt. Framework-Devtools können es anzeigen, aber nur wenn die richtige Erweiterung installiert ist, wird sie vom Build verfügbar gemacht und Sie befinden sich auf einem Computer, auf dem Sie einen Debugger öffnen können. Auf einer Staging-Site, dem Laptop eines Kollegen oder einer Produktionsseite ist das oft nicht der Fall.
Dieses Tool liest die stores direkt von der Seite. Redux wird über die store react-redux Hände an seinen Provider gefunden, Pinia und Vuex über die Vue Anwendung, in der sie installiert sind ( Vue 3 und Vue 2), und Zustand einen store, der im window angezeigt wird, oder über die Komponenten, die daraus lesen. Jeder store wird mit dem Ort aufgelistet, an dem er gefunden wurde, und sein Status wird als zusammenklappbarer Baum angezeigt, der Maps, Sets, Dates, Funktionen und Zirkelverweise lesbar hält, anstatt dass die Serialisierung fehlschlägt.
Live Modus liest den ausgewählten store alle zwei Sekunden erneut, hebt die geänderten Schlüssel der obersten Ebene hervor und führt ein kurzes Änderungsprotokoll, sodass Sie auf der Seite herumklicken und beobachten können, welchen Teil des Status jede Interaktion berührt. Ein Filter findet jeden Schlüssel oder Pfad in einem großen Zustandsbaum, und Copy state JSON liefert Ihnen eine Momentaufnahme für einen Fehlerbericht oder eine Testvorrichtung.
Wenn das Lesen nicht ausreicht, ändern Sie es an Ort und Stelle: Senden Sie eine Redux Aktion, führen Sie ein Objekt in Zustand zusammen oder rufen Sie eine seiner Aktionen auf, $patch einen Pinia store oder führen Sie seine Aktionen mit Argumenten aus und schreiben Sie Mutationen fest oder senden Sie Aktionen in Vuex, einschließlich Namespace-Modulen. Der Baum und die Seite werden sofort aktualisiert. Das Tool macht auch klar, was es nicht erreichen kann: Ein store der in einem Modul aufbewahrt und nie an die Schnittstelle übergeben wird, ist von außen unsichtbar, und das Panel erklärt, wie man ihn während der Entwicklung freilegt.
Redux und Redux Toolkit, Zustand, Pinia und Vuex auf Vue 2 und Vue 3, automatisch gefunden – kein Setup und kein Devtools-Hook im Build.
Verschachtelter Zustand als zusammenklappbarer Baum, der Maps, Sets, Dates, Funktionen, Klasseninstanzen und Zirkelverweise verarbeitet, wobei Pinia und Vuex -Getter separat angezeigt werden.
Live Modus hebt die geänderten Schlüssel der obersten Ebene hervor und protokolliert jede Änderung mit einem Zeitstempel, sodass Sie Interaktionen Statusaktualisierungen zuordnen können.
Redux Aktionen versenden, Zustand und Pinia -Aktionen mit Argumenten aufrufen, Pinia -Status $patch, in den Zustand Status zusammenführen und in Vuex festschreiben oder versenden.
Filtern Sie einen großen Zustandsbaum nach Schlüssel oder Pfad und kopieren Sie dann den gesamten Zustand als JSON für einen Fehlerbericht, ein Testgerät oder einen Vergleich.
In der App muss nichts installiert werden und es ist kein Debug-Build erforderlich – es funktioniert beim Staging, in der Produktion und auf den Websites anderer Leute, wo immer die stores erreichbar sind.
Überprüfen Sie, ob der Fehler in den Daten oder in der Ansicht liegt: Wenn der store bereits den falschen Wert enthält, ist die Komponente nicht das Problem.
Versetzen Sie den store in einen Zustand, der durch Klicken schwer zu erreichen ist – ein leerer Warenkorb, eine abgelaufene Sitzung, tausend Artikel – und sehen Sie, wie die Benutzeroberfläche damit zurechtkommt.
Lesen Sie die Live- stores eines bereitgestellten Builds, bei dem Redux DevTools oder Vue Devtools nicht verbunden sind.
Klicken Sie sich durch die App und sehen Sie sich das Änderungsprotokoll an, um zu erfahren, welche Interaktionen welchen Teil des Status aktualisieren.
Fügen Sie dem Ticket einen genauen JSON Snapshot des store hinzu, anstatt zu beschreiben, was die Benutzeroberfläche angezeigt hat.
Klicken Sie auf einer React oder Vue -Seite im DevSuite Pro Dock auf das State Inspector Symbol. Jedes gefundene store wird mit seiner Bibliothek und dem Ort, an dem es gefunden wurde, aufgelistet.
Wählen Sie ein store aus, um dessen Status als Baum anzuzeigen. Erweitern Sie die benötigten Zweige oder geben Sie den Filter ein, um direkt zu einem Schlüssel oder Pfad zu springen.
Interagieren Sie bei aktiviertem Live mit der Seite und sehen Sie sich das Änderungsprotokoll an: Jeder Eintrag zeigt die Uhrzeit und die geänderten Schlüssel der obersten Ebene an.
Geben Sie eine Aktion, einen Patch oder Argumente als JSON ein und führen Sie sie aus. Der Baum und die Seite werden sofort aktualisiert, sodass Sie Randfälle testen können, ohne den Code zu berühren.
Copy state JSON erfasst den store so, wie er gerade ist, und kann in ein Ticket, einen Test oder ein Vergleichstool eingefügt werden.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 74+ Entwickler-Tools für Ihren Browser frei.
