State Inspector βρίσκει τα stores Redux, Zustand, Pinia και Vuex στη σελίδα στην οποία βρίσκεστε, εμφανίζει την κατάστασή τους ως ζωντανό δέντρο και σας επιτρέπει να αποστέλλετε ενέργειες, ενέργειες ενημέρωσης κώδικα ή ενέργειες store κλήσης χωρίς να ανοίξετε πρόγραμμα εντοπισμού σφαλμάτων.
Τα σφάλματα front-end πολύ συχνά ζουν σε κατάσταση και όχι σε σήμανση: μια σημαία που δεν αναστρέφεται ποτέ, μια λίστα που περιέχει ένα παλιό στοιχείο, ένα αντικείμενο χρήστη που λείπει το πεδίο που αναμένει η διεπαφή. Τα προγραμματιστικά εργαλεία πλαισίου μπορούν να το εμφανίσουν, αλλά μόνο όταν εγκατασταθεί η σωστή επέκταση, η έκδοση την εκθέτει και βρίσκεστε σε ένα μηχάνημα όπου μπορείτε να ανοίξετε ένα πρόγραμμα εντοπισμού σφαλμάτων. Σε έναν ιστότοπο σκηνής, στο φορητό υπολογιστή ενός συναδέλφου ή σε μια σελίδα παραγωγής, αυτό συχνά δεν συμβαίνει.
Αυτό το εργαλείο διαβάζει τα stores απευθείας από τη σελίδα. Redux βρίσκεται μέσω των χεριών react-redux του store στον Provider του, Pinia και Vuex μέσω της εφαρμογής Vue στην οποία είναι εγκατεστημένα ( Vue 3 και Vue 2) και Zustand μέσω ενός store που εκτίθεται στο window ή μέσω των στοιχείων που διαβάζουν από αυτό. Κάθε store παρατίθεται με το σημείο που βρέθηκε και η κατάστασή του εμφανίζεται ως πτυσσόμενο δέντρο που διατηρεί Maps, Sets, Dates, τις συναρτήσεις και τις κυκλικές αναφορές αναγνώσιμες αντί να αποτυγχάνει να σειριοποιηθούν.
Live λειτουργία διαβάζει ξανά το επιλεγμένο store κάθε δύο δευτερόλεπτα, επισημαίνει τα πλήκτρα ανώτατου επιπέδου που άλλαξαν και διατηρεί ένα σύντομο αρχείο καταγραφής αλλαγών, ώστε να μπορείτε να κάνετε κλικ στη σελίδα και να παρακολουθείτε ποιο μέρος της κατάστασης αγγίζει κάθε αλληλεπίδραση. Ένα φίλτρο βρίσκει οποιοδήποτε κλειδί ή διαδρομή σε ένα μεγάλο δέντρο καταστάσεων και Copy state JSON σάς δίνει ένα στιγμιότυπο για μια αναφορά σφαλμάτων ή μια δοκιμαστική ρύθμιση.
Όταν η ανάγνωση δεν είναι αρκετή, αλλάξτε τη στη θέση της: αποστείλετε μια ενέργεια Redux, συγχωνεύστε ένα αντικείμενο στην κατάσταση Zustand ή καλέστε μια από τις ενέργειές του, $patch ένα Pinia store ή εκτελέστε τις ενέργειές του με ορίσματα και πραγματοποιήστε μεταλλάξεις ή αποστείλετε ενέργειες στο Vuex, συμπεριλαμβανομένων μονάδων με χώρο ονομάτων. Το δέντρο και η σελίδα ενημερώνονται αμέσως. Το εργαλείο είναι επίσης ξεκάθαρο σχετικά με το τι δεν μπορεί να φτάσει: ένα store που διατηρείται μέσα σε μια μονάδα και δεν έχει παραδοθεί ποτέ στη διεπαφή είναι αόρατο από έξω και ο πίνακας εξηγεί πώς να το εκθέσει κανείς κατά την ανάπτυξη.
Redux και Redux Toolkit, Zustand, Pinia και Vuex στο Vue 2 και Vue 3, βρέθηκαν αυτόματα — δεν υπάρχουν ρυθμίσεις και δεν αγκιστρώνονται devtools στην έκδοση.
Ένθετη κατάσταση ως πτυσσόμενο δέντρο που χειρίζεται Maps, Sets, Dates, συναρτήσεις, στιγμιότυπα κλάσεων και κυκλικές αναφορές, με τους λήπτες Pinia και Vuex να εμφανίζονται χωριστά.
Live λειτουργία επισημαίνει τα πλήκτρα ανώτατου επιπέδου που άλλαξαν και καταγράφει κάθε αλλαγή με χρονική σήμανση, ώστε να μπορείτε να αντιστοιχίσετε τις αλληλεπιδράσεις σε ενημερώσεις κατάστασης.
Αποστολή ενεργειών Redux, κλήση των ενεργειών Zustand και Pinia με ορίσματα, $patch κατάσταση Pinia, συγχώνευση στην κατάσταση Zustand και δέσμευση ή αποστολή στο Vuex.
Φιλτράρετε ένα μεγάλο δέντρο κατάστασης κατά κλειδί ή διαδρομή και, στη συνέχεια, αντιγράψτε ολόκληρη την κατάσταση ως JSON για μια αναφορά σφαλμάτων, ένα εξάρτημα δοκιμής ή μια σύγκριση.
Δεν χρειάζεται να εγκαταστήσετε τίποτα στην εφαρμογή και δεν χρειάζεται κατασκευή εντοπισμού σφαλμάτων — λειτουργεί στη σκηνή, στην παραγωγή και σε ιστότοπους άλλων ατόμων, όπου κι αν είναι προσβάσιμα τα stores.
Ελέγξτε εάν το σφάλμα βρίσκεται στα δεδομένα ή στην προβολή: εάν το store έχει ήδη λάθος τιμή, το στοιχείο δεν είναι το πρόβλημα.
Βάλτε το store σε μια κατάσταση που είναι δύσκολο να φτάσετε κάνοντας κλικ — ένα άδειο καλάθι, μια περίοδος λειτουργίας που έχει λήξει, χίλια αντικείμενα — και δείτε πώς λειτουργεί η διεπαφή.
Διαβάστε τα ζωντανά stores μιας αναπτυγμένης έκδοσης όπου δεν είναι συνδεδεμένα Redux DevTools ή Vue Devtools.
Κάντε κλικ στην εφαρμογή και παρακολουθήστε το αρχείο καταγραφής αλλαγών για να μάθετε ποιες αλληλεπιδράσεις ενημερώνουν ποιο τμήμα της πολιτείας.
Προσθέστε ένα ακριβές στιγμιότυπο JSON του store στο εισιτήριο αντί να περιγράψετε τι έδειξε η διεπαφή.
Κάντε κλικ στο εικονίδιο State Inspector στο dock του DevSuite Pro σε μια σελίδα React ή Vue. Κάθε store που βρίσκει παρατίθεται με τη βιβλιοθήκη του και πού βρέθηκε.
Επιλέξτε ένα store για να δείτε την κατάστασή του ως δέντρο. Αναπτύξτε τους κλάδους που χρειάζεστε ή πληκτρολογήστε το φίλτρο για να μεταβείτε κατευθείαν σε ένα κλειδί ή μια διαδρομή.
Με Live ενεργοποιημένο, αλληλεπιδράστε με τη σελίδα και παρακολουθήστε το αρχείο καταγραφής αλλαγών: κάθε καταχώρηση δείχνει την ώρα και τα πλήκτρα ανώτατου επιπέδου που άλλαξαν.
Εισαγάγετε μια ενέργεια, μια ενημερωμένη έκδοση κώδικα ή ορίσματα ως JSON και εκτελέστε την. Το δέντρο και η σελίδα ενημερώνονται αμέσως, ώστε να μπορείτε να δοκιμάσετε τις ακμές χωρίς να αγγίξετε τον κώδικα.
Copy state JSON καταγράφει το store όπως είναι τώρα, έτοιμο για επικόλληση σε ένα εισιτήριο, μια δοκιμή ή ένα εργαλείο σύγκρισης.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 74+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
