State Inspector

Błędy frontonu bardzo często żyją w stanie, a nie w znacznikach: flaga, która nigdy się nie zmienia, lista zawierająca nieaktualny element, obiekt użytkownika, w którym brakuje pola, którego oczekuje interfejs. Frameworkowe narzędzia deweloperskie mogą to pokazać, ale tylko wtedy, gdy zainstalowane jest odpowiednie rozszerzenie, kompilacja je ujawnia i znajdujesz się na komputerze, na którym możesz otworzyć debuger. W witrynie testowej, na laptopie kolegi lub na stronie produkcyjnej często tak nie jest.

Narzędzie to odczytuje stores bezpośrednio ze strony. Redux można znaleźć poprzez react-redux store, przekazaną do jego Provider, Pinia i Vuex poprzez aplikację Vue, w której są zainstalowane ( Vue 3 i Vue 2), a Zustand poprzez store odsłonięty w window lub poprzez komponenty, które z niego odczytują. Każdy store jest wymieniony wraz z miejscem, w którym został znaleziony, a jego stan jest pokazany w postaci zwijanego drzewa, które zapewnia czytelność Maps, Sets, Dates, funkcji i odwołań cyklicznych, zamiast uniemożliwiać ich serializację.

Tryb Live ponownie odczytuje wybrany store co dwie sekundy, podświetla klucze najwyższego poziomu, które uległy zmianie i prowadzi krótki dziennik zmian, dzięki czemu możesz klikać po stronie i obserwować, której części stanu dotyka każda interakcja. Filtr znajduje dowolny klucz lub ścieżkę w dużym drzewie stanów, a Copy state JSON daje migawkę raportu o błędzie lub urządzenia testowego.

Gdy czytanie nie wystarczy, zmień je na miejscu: wyślij akcję Redux, połącz obiekt w stan Zustand lub wywołaj jedną z jego akcji, $patch store Pinia lub uruchom jego akcje z argumentami oraz zatwierdź mutacje lub wyślij akcje w Vuex, w tym moduły z przestrzenią nazw. Drzewo i strona są natychmiast aktualizowane. Narzędzie jasno określa również, czego nie może osiągnąć: store przechowywany wewnątrz modułu i nigdy nie przekazywany do interfejsu jest niewidoczny z zewnątrz, a panel wyjaśnia, jak go odsłonić podczas programowania.