Vue Runtime Inspection: props and Pinia without devtools

Inspect Vue Apps at Runtime: Props, Pinia, and Network Requests Without Proxy

Vue stores component instances in the global runtime. The script locates the root instance via document.querySelector and recursively scans the component tree:

• Props are accessible as component.props.
• Changes apply directly, triggering reactivity.
• Nested components are supported without breaking the page.

The initial version enabled real-time reading and mutation of props, eliminating blind spots between network calls and DOM state.

Pinia Integration: Full Store Control

Pinia’s state lives in the global _pStoresMap object. The inspector adds:

• Read/write access to store.state.
• Invocation of getters and actions.
• Safe intervention without reloading.

This is crucial for micro-frontends: store changes instantly reflect in the UI, enabling edge-case testing without backend mocks.

Accessing Pinia example:

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

Evolution to Browser Extension & Optimization

Console scripts had limitations: manual execution, bugs on reload. The popup extension solved some issues but revealed new ones:

• Fixed size — inconvenient for large JSON structures.
• High CPU load from constant scanning.
• Corporate policies blocking installation.

In version 2.0.0, the panel moved into an iframe on the page: full screen space, minimal overhead. A bookmarklet mode was added for no-install use — javascript:(function(){...})().

Built-in Network Interception at Runtime

Proxy tools (Charles, Fiddler) suffer from setup complexity and CORS issues in SPAs. The built-in network capture intercepts fetch and XMLHttpRequest:

• Breakpoints before sending.
• Edit payload/form-data.
• Mock responses.
• Export to Postman.

Implemented via fetch override and XMLHttpRequest proxy. No external certificates needed — works within the page context.

Approach Comparison:

| Tool | Setup | CORS-safe | Runtime Integration |

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

| Charles | High | No | No |

| Devtools | None | Yes | Dev-only |

| Runtime-inspector | Low | Yes | Full |

Production-Ready Optimization

Auto-scan activates only on SPA apps with Vue signatures (presence of Vue or Pinia globals). Filters minimize CPU usage:

• Debounced rescans every 500ms.
• Selective DOM traversal.
• Lazy getter evaluation.

In production, it’s nearly invisible: under 5% CPU when idle.

Why It Matters

• No dev build required: Props, Pinia, and network data in any environment.
• Bookmarklet mode: Bypass corporate restrictions.
• Iframe UI: Scales well for complex data structures.
• Network mocking: Replace proxies without CORS headaches.
• For mid/senior devs: Runtime hacking, override techniques, Pinia internals.

The tool reduced developer support tickets by 70%, now embedded in QA workflows.

— Editorial Team