Vue Laufzeitinspektion: props und Pinia ohne devtools

Vue-Apps zur Laufzeit untersuchen: Props, Pinia und Netzwerk-Anfragen ohne Proxy

Vue speichert Komponenteninstanzen im globalen Runtime-Modus. Das Skript greift über document.querySelector auf die Root-Instanz zu und durchsucht rekursiv den Komponentenbaum:

• Props sind als component.props zugänglich.
• Änderungen wirken direkt und lösen die Reaktivität aus.
• Verschachtelte Komponenten werden unterstützt, ohne die Seite zu stören.

Die erste Version ermöglichte das Echtzeit-Lesen und Verändern von Props – blinde Flecken zwischen Netzwerkanfragen und DOM-Zustand wurden eliminiert.

Pinia-Integration: Vollständige Store-Steuerung

Pinias Zustand befindet sich in dem globalen Objekt _pStoresMap. Der Inspector fügt hinzu:

• Lese- und Schreibzugriff auf store.state.
• Aufruf von Gettern und Aktionen.
• Sicherer Eingriff ohne Neuladen.

Dies ist entscheidend für Micro-Frontends: Store-Änderungen spiegeln sich sofort im UI wider und ermöglichen die Testung von Edge-Cases ohne Backend-Mocks.

Pinia-Zugriff beispielhaft:

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

Weiterentwicklung zu einer Browser-Erweiterung & Optimierung

Console-Skripte hatten Grenzen: manuelle Ausführung, Fehler beim Neuladen. Die Popup-Erweiterung löste einige Probleme, offenbarte aber neue:

• Feste Größe – unpraktisch bei großen JSON-Strukturen.
• Hoher CPU-Verbrauch durch ständige Scans.
• Unternehmensrichtlinien, die die Installation blockieren.

In der Version 2.0.0 wurde das Panel in ein iframe auf der Seite verlegt: volle Bildschirmfläche, minimaler Overhead. Ein Bookmarklet-Modus wurde hinzugefügt – nutzbar ohne Installation: javascript:(function(){...})().

Integrierte Netzwerk-Aufzeichnung zur Laufzeit

Proxy-Tools (Charles, Fiddler) leiden unter komplexer Einrichtung und CORS-Problemen in SPAs. Die integrierte Netzwerkaufzeichnung greift auf fetch und XMLHttpRequest zu:

• Breakpoints vor dem Senden.
• Bearbeitung von Payload/FormData.
• Mocken von Antworten.
• Export in Postman.

Umgesetzt via fetch-Überschreibung und XMLHttpRequest-Proxy. Keine externen Zertifikate nötig – funktioniert innerhalb des Seitenkontexts.

Vergleich der Ansätze:

| Tool | Einrichtung | CORS-sicher | Integration zur Laufzeit |

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

| Charles | Hoch | Nein | Nein |

| Devtools | Keine | Ja | Nur im Dev-Modus |

| Runtime-inspector | Gering | Ja | Vollständig |

Optimierung für Produktionsumgebungen

Auto-Scan aktiviert sich nur bei SPA-Apps mit Vue-Signaturen (Vorhandensein von Vue oder Pinia-Globals). Filter minimieren den CPU-Verbrauch:

• Debounced Neuscan alle 500ms.
• Selektive DOM-Durchquerung.
• Lazy-Evaluation von Gettern.

Im Produktivbetrieb ist es fast unsichtbar: unter 5 % CPU bei Inaktivität.

Warum das wichtig ist

• Kein Dev-Build erforderlich: Props, Pinia und Netzwerkdaten in jeder Umgebung.
• Bookmarklet-Modus: Umgeht Unternehmensbeschränkungen.
• Iframe-Oberfläche: Skaliert gut bei komplexen Datenstrukturen.
• Netzwerk-Mocking: Ersetzt Proxy ohne CORS-Probleme.
• Für mittlere bis erfahrene Entwickler: Runtime-Hacking, Überschreibtechniken, Pinia-Internas.

Das Werkzeug reduzierte Support-Tickets um 70 % und ist nun fest in QA-Workflows integriert.

— Editorial Team