State Inspector

Ön uç hataları genellikle işaretlemeden ziyade durum halinde yaşar: hiçbir zaman değişmeyen bir bayrak, eski bir öğeyi tutan bir liste, arayüzün beklediği alanı eksik olan bir kullanıcı nesnesi. Çerçeve geliştirme araçları bunu gösterebilir, ancak yalnızca doğru uzantı yüklendiğinde yapı onu ortaya çıkarır ve siz bir hata ayıklayıcıyı açabileceğiniz bir makinedesiniz. Bir hazırlık sitesinde, bir meslektaşın dizüstü bilgisayarında veya bir üretim sayfasında durum genellikle böyle değildir.

Bu araç stores doğrudan sayfadan okur. Redux store Provider react-redux elleriyle, Pinia ve Vuex kuruldukları Vue uygulaması ( Vue 3 ve Vue 2) aracılığıyla ve Zustand, window gösterilen bir store veya ondan okunan bileşenler aracılığıyla bulunur. Her store, bulunduğu yerle birlikte listelenir ve durumu, Maps, Sets, Dates, işlevleri ve döngüsel referansları serileştirmede başarısız olmak yerine okunabilir halde tutan daraltılabilir bir ağaç olarak gösterilir.

Live mod, seçilen store her iki saniyede bir yeniden okur, değişen üst düzey tuşları vurgular ve kısa bir değişiklik günlüğü tutar; böylece sayfada dolaşabilir ve her etkileşimin durumun hangi kısmına dokunduğunu izleyebilirsiniz. Bir filtre, büyük bir durum ağacındaki herhangi bir anahtarı veya yolu bulur ve Copy state JSON size bir hata raporu veya test fikstürü için anlık görüntü verir.

Okuma yeterli olmadığında, onu yerinde değiştirin: bir Redux eylemi gönderin, bir nesneyi Zustand durumuna birleştirin veya eylemlerinden birini çağırın, bir Pinia store $patch veya eylemlerini argümanlarla çalıştırın ve mutasyonları gerçekleştirin veya ad alanlı modüller de dahil olmak üzere Vuex eylemler gönderin. Ağaç ve sayfa anında güncellenir. Araç aynı zamanda neye ulaşamayacağı konusunda da nettir: Bir modülün içinde tutulan ve asla arayüze verilmeyen bir store dışarıdan görünmez ve panel, geliştirme sırasında bir deponun nasıl açığa çıkarılacağını açıklar.