Inspección de Runtime de Vue: props y Pinia sin devtools

Inspecciona aplicaciones Vue en tiempo real: Props, Pinia y peticiones de red sin proxy

Los componentes de Vue se almacenan en el entorno global de tiempo de ejecución. El script localiza la instancia raíz mediante document.querySelector y escanea recursivamente el árbol de componentes:

• Los props son accesibles como component.props.
• Los cambios se aplican directamente, activando la reactividad.
• Se soportan componentes anidados sin romper la página.

La versión inicial permitió leer y modificar props en tiempo real, eliminando los puntos ciegos entre las llamadas de red y el estado del DOM.

Integración con Pinia: Control total de almacenes

El estado de Pinia reside en el objeto global _pStoresMap. El inspector añade:

• Acceso de lectura/escritura a store.state.
• Invocación de getters y acciones.
• Intervención segura sin recargar.

Esto es clave para microfrontends: los cambios en el almacén se reflejan instantáneamente en la interfaz, permitiendo pruebas de casos extremos sin mocks del backend.

Ejemplo de acceso a Pinia:

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

Evolución hacia extensión de navegador y optimización

Los scripts de consola tenían limitaciones: ejecución manual, errores tras recarga. La extensión emergente resolvió algunos problemas pero reveló otros:

• Tamaño fijo — incómodo para estructuras JSON grandes.
• Alto consumo de CPU por escaneo constante.
• Políticas corporativas que bloquean la instalación.

En la versión 2.0.0, el panel pasó a un iframe dentro de la página: espacio completo, bajo impacto. Se añadió un modo bookmarklet para uso sin instalación — javascript:(function(){...})().

Interceptación integrada de red en tiempo de ejecución

Las herramientas proxy (Charles, Fiddler) sufren por su complejidad de configuración y problemas CORS en SPAs. La captura de red integrada intercepta fetch y XMLHttpRequest:

• Puntos de interrupción antes del envío.
• Edición de carga útil/form-data.
• Mock de respuestas.
• Exportación a Postman.

Implementado mediante sobrecarga de fetch y proxy de XMLHttpRequest. No se necesitan certificados externos — funciona dentro del contexto de la página.

Comparación de enfoques:

| Herramienta | Configuración | Seguro con CORS | Integración en tiempo de ejecución |

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

| Charles | Alta | No | No |

| Devtools | Ninguna | Sí | Solo en desarrollo |

| Runtime-inspector | Baja | Sí | Completa |

Optimización lista para producción

El escaneo automático se activa solo en apps SPA con firmas de Vue (presencia de Vue o globales de Pinia). Los filtros minimizan el uso de CPU:

• Reescaneo diferido cada 500ms.
• Navegación selectiva del DOM.
• Evaluación perezosa de getters.

En producción, prácticamente invisible: menos del 5% de CPU en reposo.

¿Por qué importa?

• Sin build de desarrollo necesario: Props, Pinia y datos de red en cualquier entorno.
• Modo bookmarklet: Circunvención de restricciones corporativas.
• Interfaz en iframe: Escala bien con estructuras de datos complejas.
• Mock de red: Reemplaza proxies sin problemas de CORS.
• Para devs intermedios/seniores: Hacking en tiempo de ejecución, técnicas de sobrescritura, internos de Pinia.

Herramienta redujo en un 70% los tickets de soporte, ahora integrada en flujos de QA.

— Editorial Team