State Inspector menemukan stores Redux, Zustand, Pinia dan Vuex di halaman yang Anda buka, menampilkan statusnya sebagai pohon aktif, dan memungkinkan Anda mengirimkan tindakan, menambal status, atau memanggil tindakan store tanpa membuka debugger.
Bug front-end sering kali berada dalam keadaan dan bukan dalam markup: sebuah bendera yang tidak pernah terbalik, sebuah daftar berisi item yang sudah usang, sebuah objek pengguna tidak memiliki bidang yang diharapkan oleh antarmuka. Framework devtools dapat menampilkannya, tetapi hanya ketika ekstensi yang tepat dipasang, build akan mengeksposnya dan Anda berada di mesin tempat Anda dapat membuka debugger. Di situs pementasan, laptop rekan kerja, atau halaman produksi, hal ini sering kali tidak terjadi.
Alat ini membaca stores langsung dari halamannya. Redux ditemukan melalui store react-redux langsung ke Provider, Pinia dan Vuex melalui aplikasi Vue tempat mereka diinstal ( Vue 3 dan Vue 2), dan Zustand melalui store yang terekspos di window atau melalui komponen yang membacanya. Setiap store dicantumkan di mana ia ditemukan, dan statusnya ditampilkan sebagai pohon yang dapat diciutkan sehingga Maps, Sets, Dates, fungsi dan referensi melingkar tetap dapat dibaca alih-alih gagal membuat serial.
Mode Live membaca ulang store yang dipilih setiap dua detik, menyorot kunci tingkat atas yang berubah, dan menyimpan log perubahan singkat, sehingga Anda dapat mengeklik di sekitar halaman dan melihat bagian status mana yang disentuh setiap interaksi. Filter menemukan kunci atau jalur apa pun di pohon status besar, dan Copy state JSON memberi Anda cuplikan untuk laporan bug atau perlengkapan pengujian.
Ketika membaca saja tidak cukup, ubahlah di tempatnya: kirim tindakan Redux, gabungkan objek ke status Zustand atau panggil salah satu tindakannya, $patch store Pinia atau jalankan tindakannya dengan argumen, dan lakukan mutasi atau kirim tindakan di Vuex, termasuk modul dengan namespace. Pohon dan halaman segera diperbarui. Alat ini juga jelas tentang apa yang tidak dapat dijangkau: store yang disimpan di dalam modul dan tidak pernah diserahkan ke antarmuka tidak terlihat dari luar, dan panel menjelaskan cara mengeksposnya selama pengembangan.
Redux dan Redux Toolkit, Zustand, Pinia dan Vuex di Vue 2 dan Vue 3, ditemukan secara otomatis — tidak ada pengaturan dan tidak ada kaitan devtools dalam build.
Status bersarang sebagai pohon yang dapat diciutkan yang menangani Maps, Sets, Dates, fungsi, instance kelas, dan referensi melingkar, dengan getter Pinia dan Vuex ditampilkan secara terpisah.
Mode Live menyoroti kunci tingkat atas yang berubah dan mencatat setiap perubahan dengan stempel waktu, sehingga Anda dapat memetakan interaksi ke pembaruan status.
Kirim tindakan Redux, panggil tindakan Zustand dan Pinia dengan argumen, status $patch Pinia, gabungkan ke status Zustand, dan komit atau kirim di Vuex.
Filter pohon status besar berdasarkan kunci atau jalur, lalu salin seluruh status sebagai JSON untuk laporan bug, perlengkapan pengujian, atau perbandingan.
Tidak perlu menginstal apa pun di aplikasi dan tidak memerlukan build debug — aplikasi ini berfungsi pada staging, produksi, dan di situs orang lain, di mana pun stores dapat dijangkau.
Periksa apakah bug ada di data atau di tampilan: jika store sudah menyimpan nilai yang salah, komponennya bukan masalahnya.
Letakkan store dalam keadaan yang sulit dijangkau dengan mengklik — keranjang kosong, sesi kedaluwarsa, seribu item — dan lihat bagaimana antarmuka mengatasinya.
Baca stores langsung dari build yang diterapkan di mana Redux DevTools atau Vue Devtools tidak terhubung.
Klik melalui aplikasi dan lihat log perubahan untuk mengetahui interaksi mana yang memperbarui bagian negara bagian mana.
Tambahkan snapshot JSON yang tepat dari store tersebut ke tiket alih-alih menjelaskan apa yang ditampilkan antarmuka.
Klik ikon State Inspector di dok DevSuite Pro pada halaman React atau Vue. Setiap store yang ditemukannya terdaftar beserta perpustakaannya dan di mana toko itu ditemukan.
Pilih store untuk melihat statusnya sebagai pohon. Perluas cabang yang Anda perlukan, atau ketik filter untuk melompat langsung ke kunci atau jalur.
Dengan Live diaktifkan, berinteraksilah dengan halaman dan lihat log perubahan: setiap entri menunjukkan waktu dan kunci tingkat atas yang berubah.
Masukkan tindakan, tambalan, atau argumen sebagai JSON dan jalankan. Pohon dan halaman langsung diperbarui, sehingga Anda dapat menguji kasus tepi tanpa menyentuh kodenya.
Copy state JSON menangkap store seperti sekarang, siap untuk ditempelkan ke dalam tiket, pengujian, atau alat perbandingan.
Instal DevSuite Pro secara gratis dan buka 74+ alat pengembang untuk browser Anda.
