Inspekce Vue runtime: props a Pinia bez devtools

Prohlížeč runtime aplikací Vue: props, Pinia a síťové požadavky bez proxy

Vue ukládá instance komponent v globálním runtime. Skript najde kořenovou instanci pomocí document.querySelector a rekurzivně prohledá strom:

• Props jsou dostupné jako component.props.
• Změny se aplikují přímo, aktivují reaktivitu.
• Podpora vnořených komponent bez poškození stránky.

První verze umožňovala číst a měnit props během provozu, odstraňujíc slunné zóny mezi sítí a DOM.

Integrace Pinia: plná kontrola store

Stav Pinia žije v globálním objektu _pStoresMap. Prohlížeč přidává:

• Čtení a zápis store.state.
• Volání getterů a akcí.
• Bezpečné zásahy bez restartování.

To je kritické pro mikrofrontendy: změny ve store okamžitě odrážejí v UI, což umožňuje testovat extrémní scénáře bez podvádění backendu.

Příklad přístupu k Pinia:

const piniaStores = window._pStoresMap;
const store = piniaStores.get('counter');
console.log(store.state);

Přechod k prohlížečovému rozšíření a optimalizace

Skripty v konzoli měly omezení: ruční spuštění, chyby při obnovování. Rozšíření v popupu vyřešilo část problémů, ale odhalilo nové:

• Pevná velikost – nepraktické pro JSON struktury.
• Vysoká zátěž CPU z důvodu trvalého skenování.
• Korporátní politiky blokují instalaci.

V verzi 2.0.0 byla panel přesunut do iframe na stránce: plné prostorové možnosti, nízká zátěž. Přidán režim bookmarky pro spuštění bez instalace – javascript:(function(){...})().

Síťový interceptor v runtime

Proxy nástroje (Charles, Fiddler) trpí nastavením a CORS problémy v SPA. Vnitřní zachytávání sítě zachytává fetch/XMLHttpRequest:

• Bodové zarážky před odesláním.
• Úprava payloadu nebo form-data.
• Mock odpovědi.
• Export do Postman.

Realizováno přepsáním fetch a proxy XMLHttpRequest. Žádné externí certifikáty – funguje v kontextu stránky.

Srovnání přístupů:

| Nástroj | Nastavení | Bezpečné pro CORS | Runtime integrace |

|--------|--------|-----------|--------------------|

| Charles | Vysoké | Ne | Ne |

| Devtools | Žádné | Ano | Pouze v dev |

| Runtime-inspector | Nízké | Ano | Plné |

Optimalizace pro produkci

Autoskenování se aktivuje pouze u SPA s Vue signaturami (přítomnost Vue nebo Pinia globálních proměnných). Filtry minimalizují zátěž CPU:

• Debounced znovu-prohledávání každých 500ms.
• Vybrané procházení DOM.
• Líné vyhodnocení getterů.

V produkci to není cítit: <5% CPU v klidu.

Co je důležité

• Přístup bez dev-sbírky: Props/Pinia/Síťové požadavky v jakékoli prostředí.
• Režim bookmarky: Obcházení korporátních omezení.
• Iframe UI: Měřítko pro složité struktury.
• Mocky sítě: Nahrazení proxy bez CORS.
• Pro middle/senior: Runtime hackování, techniky přepsání, interní funkce Pinia.

Nástroj snížil počet dotazů k vývojářům o 70 %, integrovaný do QA procesu.

— Editorial Team