DevTools-Erweiterung

Die Text.js-DevTools-Erweiterung fügt neben „Konsole“ einen Bereich Text.js hinzu. Er untersucht die App, die in der Konsole rendert.

• Komponenten: der React-Baum jedes Konsolen-Roots mit Props, Hooks, Keys und den dahinterliegenden Szenenknoten tx-box / tx-text, angeordnet in Zellen.
• Frame: der aktuelle Frame als Zellenraster. Bewege den Mauszeiger über eine Zelle, um zu sehen, welche Komponente sie gezeichnet hat. Klicke, um den Knoten auszuwählen. Er wird in der laufenden Konsole hervorgehoben.
• Zeitleiste: Zeiten für React, Layout, Zeichnen und Kodieren pro Frame, übersprungene und ausgegebene Frames, Frame-Abstände und %c-Spans.
• Steuerung: Ausgabe pausieren und fortsetzen, Layout-Drahtgitter ein- und ausschalten, Rastergröße fixieren oder anpassen, den Frame als Text kopieren.

#Installation

Die Erweiterung wird aus packages/devtools-extension gebaut und entpackt geladen:

bun run --cwd packages/devtools-extension build

1. Öffne chrome://extensions und aktiviere den „Entwicklermodus“.
2. Klicke auf „Entpackte Erweiterung laden“ und wähle packages/devtools-extension/dist aus.
3. Lade deine App neu und öffne DevTools. Der Bereich Text.js erscheint, sobald die Seite einen Konsolen-Root erstellt.

Der Build erstellt außerdem release/textjs-devtools-<version>.zip, bereit für den Chrome Web Store.

#Komponenten

Wähle eine Komponente aus, um ihre Props, ihre Hooks in Aufrufreihenfolge (State, Ref, Memo, Effect und so weiter, mit aktuellen Werten) und den von ihr gerenderten Szenenknoten mit Position, Größe und Box-Innenabständen in Zellen zu sehen. Wenn du den Mauszeiger über eine Zeile bewegst, wird der Knoten in der Konsole hervorgehoben. Host-Knoten blendet die Elemente tx-box und tx-text zwischen Komponenten ein oder aus.

Der Baum aktualisiert sich nach Commits, solange der Bereich geöffnet ist. Werte sind Zusammenfassungen für die Anzeige, keine Live-Objekte.

#Frame

Der Frame-Inspektor zeichnet den Zellenpuffer des Renderers: jede Glyphe, jeden Vordergrund, Hintergrund und jedes Attribut. Wenn du den Mauszeiger über eine Zelle bewegst, siehst du ihr Zeichen und ihre Farben, den in Zeichenreihenfolge obersten Szenenknoten (unter Berücksichtigung von overflow, Scroll-Versatz und zIndex) sowie die Komponenten, die diesen Knoten gerendert haben. Ein Klick wählt den Knoten unter Komponenten aus und hebt ihn in der laufenden Konsole mit dem eigenen Hervorhebungs-Overlay des Renderers hervor.

#Zeitleiste

Jeder Balken entspricht einem Renderer-Frame:

Übersprungene Frames erscheinen blasser: Es hat sich nichts geändert, also wurde nichts ausgegeben. Das Diagramm der Frame-Abstände zeigt den Abstand zwischen ausgegebenen Frames im Vergleich zum Mindestintervall von 66 ms.

Die Zeitmessung endet bei console.log(). Formatierung und Zeichnen der Nachricht finden in DevTools statt und lassen sich von der Seite aus nicht beobachten, daher zeigt die Zeitleiste sie nicht an. Nebenläufige Render-Vorgänge, die zwischen Frames committen, werden als Commits gezählt, aber nicht zeitlich erfasst.

#Funktionsweise

Wie React DevTools installiert die Erweiterung einen globalen Hook, bevor die Seite ausgeführt wird:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Jeder Konsolen-Root registriert sich bei seiner Erstellung bei diesem Hook. Ohne die Erweiterung existiert der Hook nicht, und ein Root prüft nur einmal darauf und erledigt keine Arbeit pro Frame. Ist die Erweiterung installiert, der Bereich aber geschlossen, kostet jeder Frame einen Lesezugriff auf eine Eigenschaft. Bäume und Frames werden nur berechnet, wenn der Bereich sie anfordert.

Nachrichten fließen von der Seite → Content-Skript → Service-Worker → Bereich. Die Content-Skripte laufen auf jeder Seite, damit der Hook existiert, bevor deine App startet. Das ist der einzige Zugriff, den die Erweiterung anfordert. Sie lädt keinen entfernten Code und sendet nichts vom Rechner.

#Datenschutz

Die Erweiterung erfasst keine Daten. Sie stellt keine Netzwerkanfragen, speichert nichts und verwendet keine Analysewerkzeuge. Komponentenbäume, Frames und Zeitmessungen werden nur zwischen der Seite und dem DevTools-Bereich im selben Browser übertragen und beim Schließen von DevTools verworfen. Frame kopieren schreibt den Text des Frames in deine Zwischenablage, wenn du darauf klickst.

#Einschränkungen

• Chrome und Chromium-basierte Browser ab Version 111.
• Apps, die vor der Installation der Erweiterung gestartet wurden, müssen neu geladen werden.
• Nur der oberste Frame eines Tabs wird untersucht.
• Zeiten stammen aus performance.now(), dessen Auflösung Browser auf etwa 0,1 ms vergröbern.