State Inspector menemui stores Redux, Zustand, Pinia dan Vuex pada halaman yang anda buka, menunjukkan keadaannya sebagai pepohon langsung dan membolehkan anda menghantar tindakan, keadaan tampalan atau tindakan store panggilan tanpa membuka penyahpepijat.
Pepijat bahagian hadapan selalunya hidup dalam keadaan dan bukannya dalam penanda: bendera yang tidak pernah terbalik, senarai yang menyimpan item lapuk, objek pengguna tiada medan yang dijangkakan antara muka. Rangka kerja devtools boleh menunjukkannya, tetapi hanya apabila sambungan yang betul dipasang, binaan mendedahkannya dan anda berada pada mesin yang membolehkan anda membuka penyahpepijat. Pada tapak pementasan, komputer riba rakan sekerja atau halaman pengeluaran, selalunya tidak begitu.
Alat ini membaca stores terus dari halaman. Redux ditemui melalui tangan react-redux store kepada Provider, Pinia dan Vuex melalui aplikasi Vue yang dipasang di dalamnya ( Vue 3 dan Vue 2), dan Zustand melalui store yang terdedah pada window atau melalui komponen yang membaca daripadanya. Setiap store disenaraikan dengan tempat ia ditemui dan keadaannya ditunjukkan sebagai pokok boleh lipat yang memastikan Maps, Sets, Dates, fungsi dan rujukan bulat boleh dibaca dan bukannya gagal untuk bersiri.
Mod Live membaca semula store yang dipilih setiap dua saat, menyerlahkan kekunci peringkat teratas yang berubah dan menyimpan log perubahan pendek, supaya anda boleh mengklik di sekeliling halaman dan melihat bahagian mana yang disentuh oleh setiap interaksi. Penapis mencari sebarang kunci atau laluan dalam pepohon keadaan yang besar dan Copy state JSON memberi anda gambaran untuk laporan pepijat atau lekapan ujian.
Apabila membaca tidak mencukupi, ubahnya pada tempatnya: hantar tindakan Redux, gabungkan objek ke dalam keadaan Zustand atau panggil salah satu tindakannya, $patch store Pinia atau jalankan tindakannya dengan hujah dan lakukan mutasi atau tindakan penghantaran dalam Vuex, termasuk modul ruang nama. Pokok dan halaman dikemas kini dengan segera. Alat ini juga jelas tentang perkara yang tidak dapat dicapai: store yang disimpan di dalam modul dan tidak pernah diserahkan kepada antara muka tidak kelihatan dari luar, dan panel menerangkan cara untuk mendedahkannya semasa pembangunan.
Redux dan Redux Toolkit, Zustand, Pinia dan Vuex pada Vue 2 dan Vue 3, ditemui secara automatik — tiada persediaan dan tiada cangkuk devtools dalam binaan.
Keadaan bersarang sebagai pepohon boleh lipat yang mengendalikan Maps, Sets, Dates, fungsi, kejadian kelas dan rujukan bulat, dengan pengambil Pinia dan Vuex ditunjukkan secara berasingan.
Mod Live menyerlahkan kekunci peringkat teratas yang berubah dan merekodkan setiap perubahan dengan cap masa, supaya anda boleh memetakan interaksi untuk menyatakan kemas kini.
Hantar tindakan Redux, panggil tindakan Zustand dan Pinia dengan argumen, $patch keadaan Pinia, gabungkan ke dalam keadaan Zustand dan komit atau hantar dalam Vuex.
Tapis pepohon keadaan besar mengikut kunci atau laluan, kemudian salin keseluruhan keadaan sebagai JSON untuk laporan pepijat, lekapan ujian atau perbandingan.
Tiada apa-apa untuk dipasang dalam apl dan tiada binaan nyahpepijat diperlukan — ia berfungsi pada pementasan, pada pengeluaran dan pada tapak orang lain, di mana-mana stores boleh dicapai.
Semak sama ada pepijat berada dalam data atau dalam paparan: jika store sudah menyimpan nilai yang salah, komponen itu bukan masalahnya.
Letakkan store dalam keadaan yang sukar dicapai dengan mengklik — troli kosong, sesi tamat tempoh, seribu item — dan lihat cara antara muka mengatasinya.
Baca stores langsung binaan yang digunakan di mana Redux DevTools atau Vue Devtools tidak disambungkan.
Klik melalui apl dan tonton log perubahan untuk mengetahui interaksi yang mengemas kini bahagian negeri mana.
Tambahkan gambar JSON store yang tepat pada tiket dan bukannya menerangkan perkara yang ditunjukkan oleh antara muka.
Klik ikon State Inspector dalam dok DevSuite Pro pada halaman React atau Vue. Setiap store yang ditemuinya disenaraikan dengan perpustakaannya dan tempat ia ditemui.
Pilih store untuk melihat keadaannya sebagai pokok. Kembangkan cawangan yang anda perlukan, atau taipkan penapis untuk melompat terus ke kunci atau laluan.
Dengan Live dihidupkan, berinteraksi dengan halaman dan tonton log perubahan: setiap entri menunjukkan masa dan kekunci peringkat atas yang berubah.
Masukkan tindakan, tampung atau hujah sebagai JSON dan jalankannya. Pokok dan halaman mengemas kini terus, jadi anda boleh menguji kes tepi tanpa menyentuh kod.
Copy state JSON menangkap store seperti sekarang, sedia untuk tampal ke dalam tiket, ujian atau alat perbandingan.
Pasang DevSuite Pro secara percuma dan buka 74+ alat pembangun untuk pelayar anda.
