Inspection d'exécution Vue : props et Pinia sans devtools

Inspecter les applications Vue en temps réel : props, Pinia et requêtes réseau sans proxy

Les composants Vue sont stockés dans le runtime global. Le script localise l'instance racine via document.querySelector puis parcourt récursivement l'arbre des composants :

• Les props sont accessibles via component.props.
• Les modifications s'appliquent directement, déclenchant la réactivité.
• Les composants imbriqués sont pris en charge sans perturber la page.

La version initiale permettait de lire et modifier les props en temps réel, éliminant les zones d'ombre entre les appels réseau et l'état du DOM.

Intégration avec Pinia : contrôle total des stores

L'état de Pinia est stocké dans l'objet global _pStoresMap. L'inspecteur ajoute :

• Un accès en lecture/écriture à store.state.
• L'exécution de getters et d'actions.
• Des interventions sécurisées sans rechargement.

Cela est essentiel pour les micro-frontends : les changements de store se reflètent instantanément dans l’interface, permettant de tester des cas limites sans mocks backend.

Exemple d'accès à Pinia :

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

Évolution vers extension navigateur et optimisation

Les scripts en console présentaient des limites : exécution manuelle, bugs après rechargement. L'extension popup a résolu certains problèmes mais en a révélé d'autres :

• Taille fixe — peu pratique pour de grands objets JSON.
• Charge CPU élevée due au balayage constant.
• Politiques d'entreprise bloquant l'installation.

Dans la version 2.0.0, le panneau a été intégré dans un iframe sur la page : espace plein écran, surcharge minimale. Une mode bookmarklet a été ajoutée pour une utilisation sans installation — javascript:(function(){...})().

Interception intégrée du réseau en temps réel

Les outils de proxy (Charles, Fiddler) souffrent de complexité de configuration et de problèmes CORS dans les SPAs. La capture réseau intégrée intercepte fetch et XMLHttpRequest :

• Points d'arrêt avant l'envoi.
• Modification du payload ou des données formulaires.
• Simulation de réponses.
• Export vers Postman.

Implémentée via une surcharge de fetch et un proxy pour XMLHttpRequest. Aucun certificat externe nécessaire — fonctionne directement dans le contexte de la page.

Comparaison des approches :

| Outil | Configuration | Sécurité CORS | Intégration en temps réel |

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

| Charles | Élevée | Non | Non |

| Devtools | Aucune | Oui | Exclusivement en dev |

| Runtime-inspector | Faible | Oui | Complète |

Optimisation prête pour production

Le balayage automatique s'active uniquement sur les applications SPA avec des signatures Vue (présence des globales Vue ou Pinia). Les filtres minimisent la consommation CPU :

• Rebalayage débouncé toutes les 500ms.
• Parcours sélectif du DOM.
• Évaluation paresseuse des getters.

En production, il est presque invisible : moins de 5 % de CPU en veille.

Pourquoi cela compte

• Pas besoin de build de développement : props, Pinia et données réseau disponibles dans tout environnement.
• Mode bookmarklet : contourner les restrictions d'entreprise.
• Interface iframe : s'adapte parfaitement aux structures de données complexes.
• Simulation réseau : remplacer les proxies sans les galères CORS.
• Pour développeurs confirmés : manipulation en temps réel, techniques d'override, introspection de Pinia.

Outil qui a réduit les tickets support développeurs de 70 %, désormais intégré aux processus QA.

— Editorial Team