Extension DevTools

L’extension Text.js pour DevTools ajoute un panneau Text.js à côté de « Console ». Elle inspecte l’application dont le rendu s’affiche dans la console.

• Composants : l’arbre React de chaque racine de console, avec les props, les hooks, les clés et les nœuds de scène tx-box / tx-text sous-jacents, disposés en cellules.
• Frame : la frame actuelle sous forme de grille de cellules. Survolez une cellule pour voir quel composant l’a peinte. Cliquez pour sélectionner le nœud. Il est mis en surbrillance dans la console en direct.
• Chronologie : les temps React, de layout, de peinture et d’encodage par frame, les frames ignorées et émises, la cadence des frames et les spans %c.
• Commandes : mettre en pause et reprendre la sortie, activer ou désactiver la vue filaire du layout, fixer ou ajuster la taille de la grille, copier la frame sous forme de texte.

#Installation

L’extension est compilée depuis packages/devtools-extension et chargée sans être empaquetée :

bun run --cwd packages/devtools-extension build

1. Ouvrez chrome://extensions et activez « Mode développeur ».
2. Cliquez sur « Charger l’extension non empaquetée » et sélectionnez packages/devtools-extension/dist.
3. Rechargez votre application et ouvrez DevTools. Le panneau Text.js apparaît dès que la page crée une racine de console.

La compilation génère aussi release/textjs-devtools-<version>.zip, prêt pour le Chrome Web Store.

#Composants

Sélectionnez un composant pour voir ses props, ses hooks dans l’ordre des appels (State, Ref, Memo, Effect, etc., avec leurs valeurs actuelles) et le nœud de scène qu’il rend, avec sa position, sa taille et les retraits de sa boîte en cellules. Le survol d’une ligne met le nœud en surbrillance dans la console. Nœuds hôtes affiche ou masque les éléments tx-box et tx-text entre les composants.

L’arbre s’actualise après les commits tant que le panneau est ouvert. Les valeurs sont des résumés destinés à l’affichage, pas des objets actualisés en direct.

#Frame

L’inspecteur de frame dessine le tampon de cellules du moteur de rendu : chaque glyphe, couleur de premier plan, arrière-plan et attribut. Le survol d’une cellule indique son caractère et ses couleurs, le nœud de scène qui la recouvre dans l’ordre de peinture (en respectant overflow, les décalages de défilement et zIndex), ainsi que les composants qui ont rendu ce nœud. Un clic sélectionne le nœud dans Composants et le met en surbrillance dans la console en direct avec la superposition de surbrillance du moteur de rendu.

#Chronologie

Chaque barre représente une frame du moteur de rendu :

Les frames ignorées sont estompées : rien n’a changé, donc rien n’a été écrit dans la console. Le graphique de cadence montre l’écart entre les frames émises par rapport à l’intervalle minimal de 66 ms.

Les mesures de temps s’arrêtent à console.log(). Le formatage et la peinture du message ont lieu dans DevTools et ne sont pas observables depuis la page, donc la chronologie ne les affiche pas. Les rendus concurrents qui effectuent un commit entre les frames sont comptés comme des commits, sans mesure de durée.

#Fonctionnement

Comme React DevTools, l’extension installe un hook global avant l’exécution de la page :

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Chaque racine de console s’y enregistre à sa création. Sans l’extension, le hook n’existe pas, et une racine ne vérifie sa présence qu’une seule fois, sans travail à chaque frame. Lorsque l’extension est installée mais que le panneau est fermé, les frames coûtent une lecture de propriété. Les arbres et les frames ne sont calculés que lorsque le panneau les demande.

Les messages circulent de la page → script de contenu → service worker → panneau. Les scripts de contenu s’exécutent sur chaque page pour que le hook existe avant le démarrage de votre application. C’est le seul accès demandé par l’extension. Elle ne charge aucun code distant et n’envoie rien hors de la machine.

#Confidentialité

L’extension ne collecte aucune donnée. Elle n’effectue aucune requête réseau, ne stocke rien et n’intègre aucun outil d’analyse. Les arbres de composants, les frames et les mesures de temps circulent uniquement entre la page et le panneau DevTools du même navigateur, et sont supprimés lorsque vous fermez DevTools. Copier la frame écrit le texte de la frame dans votre presse-papiers lorsque vous cliquez dessus.

#Limites

• Chrome et navigateurs basés sur Chromium, version 111 ou ultérieure.
• Rechargement nécessaire pour les applications démarrées avant l’installation de l’extension.
• Inspection limitée à la frame de niveau supérieur d’un onglet.
• Mesures de temps issues de performance.now(), dont les navigateurs réduisent la précision à environ 0,1 ms.