Inspekcja aplikacji Vue w czasie działania: props, Pinia i zapytania sieciowe bez proxy
Vue przechowuje instancje komponentów w globalnym środowisku runtime. Skrypt znajduje główną instancję za pomocą document.querySelector i rekursywnie przeszukuje drzewo:
- Props są dostępne jako
component.props. - Zmiany są stosowane bezpośrednio, wyzwalając reaktywność.
- Obsługa zagnieżdżonych komponentów bez naruszania działania strony.
Pierwsza wersja pozwalała na odczyt i modyfikację props w locie, usuwając ślepe zakresy między zapytaniami sieciowymi a DOM-em.
Integracja z Pinia: pełna kontrola nad stanem
Stan Pinii znajduje się w globalnym obiekcie _pStoresMap. Inspektor dodaje:
- Odczyt i zapis
store.state. - Wywoływanie getterów i akcji.
- Bezpieczne interwencje bez ponownego ładowania strony.
To krytyczne dla mikrofrontendów: zmiany w stanie natychmiast odzwierciedlają się w UI, umożliwiając testowanie przypadków granicznych bez podmiany backendu.
Przykład dostępu do Pinii:
const piniaStores = window._pStoresMap;
const store = piniaStores.get('counter');
console.log(store.state);Przejście do rozszerzenia przeglądarki i optymalizacja
Skrypty w konsoli miały ograniczenia: ręczny uruchomienie, błędy przy przeładowaniu. Rozszerzenie w okienku popup częściowo je rozwiązało, ale ujawniło nowe problemy:
- Stała wielkość — nieprzyjemne przy strukturach JSON.
- Wysokie obciążenie CPU przez ciągłe skanowanie.
- Polityki korporacyjne blokujące instalację.
W wersji 2.0.0 pasek przeniesiono do iframe na stronie: pełne przestrzeń, niski narzut. Dodano tryb zakładki do uruchamiania bez instalacji — javascript:(function(){...})().
Przechwytywanie zapytań sieciowych w czasie działania
Narzędzia typu proxy (Charles, Fiddler) cierpią z powodu trudności w konfiguracji i problemów CORS w SPA. Wbudowany przechwytywacz sieciowy obsługuje fetch i XMLHttpRequest:
- Punkty przerwania przed wysłaniem.
- Edycja payloadu i danych formularza.
- Mockowanie odpowiedzi.
- Eksport do Postmana.
Zaimplementowano poprzez nadpisanie fetch i proxy XMLHttpRequest. Żadnych zewnętrznych certyfikatów — działa w kontekście strony.
Porównanie podejść:
| Narzędzie | Konfiguracja | Bezpieczeństwo CORS | Integracja w czasie działania |
|------------|--------|-----------|--------------------|
| Charles | Wysoka | Nie | Nie |
| Devtools | Brak | Tak | Tylko w trybie dev |
| Runtime-inspector | Niska | Tak | Pełna |
Optymalizacja dla środowiska produkcyjnego
Automatyczne skanowanie aktywuje się tylko w SPA z sygnaturami Vue (obecność Vue lub globalnych zmiennych Pinii). Filtry minimalizują obciążenie CPU:
- Debounced ponowne skanowanie co 500ms.
- Wybór fragmentów DOM.
- Opóźnione wyliczanie getterów.
W środowisku produkcyjnym to niemal niewidoczne: <5% zużycia CPU w stanie bezczynności.
Co jest ważne
- Dostęp bez budowania w trybie dev: Props, Pinia, Network w dowolnym środowisku.
- Tryb zakładki: Obchodzenie ograniczeń korporacyjnych.
- Interfejs w iframe: Skalowalność dla skomplikowanych struktur.
- Mockowanie zapytań sieciowych: Zastępowanie proxy bez CORS.
- Dla developerów średnich i seniorów: Techniki override, głębokie zrozumienie Pinii, hakerstwo w czasie działania.
Narzędzie zmniejszyło liczbę zgłoszeń do zespołu deweloperskiego o 70%, całkowicie zintegrowane z procesem QA.
— Editorial Team
Brak komentarzy.