Text.js DevTools

Adds a Text.js panel to Chrome DevTools with the component tree, a cell-level frame inspector and a frame timeline.

Text.js DevTools adds a Text.js panel to Chrome DevTools, next to Console. It inspects Text.js apps, which render in the DevTools console with console.log. The panel has three views: • Components: the React tree of every console root, with props, hooks, keys and the scene nodes behind them, laid out in cells. Hovering a row highlights the node in the Console. • Frame: the current frame as a cell grid. Hover a cell to see its character, its colors and the component that painted it. Click it to select that component. • Timeline: React, layout, paint and encode times for each frame, skipped and emitted frames, frame pacing against the 66ms minimum interval, and the number of %c spans. The toolbar pauses and resumes output, toggles a layout wireframe, pins or fits the grid size, and copies the frame as text. Open DevTools on a page with a Text.js app, and the Text.js panel appears once the app creates its console root. With the panel closed, the extension costs the app one property read per frame. The extension makes no network requests and collects no data. It needs Chrome 111 or later. Docs: https://textjs.org/docs/devtools-extension