DevTools 扩展

Text.js DevTools 扩展在控制台旁添加一个 Text.js 面板，用于检查正在控制台中渲染的应用。

• 组件：每个控制台根节点的 React 树，包含 props、Hook、key，以及背后的 tx-box / tx-text 场景节点，按单元格布局。
• 帧：以单元格网格显示当前帧。悬停在单元格上可查看绘制它的组件。点击可选择节点。该节点会在实时控制台中高亮显示。
• 时间线：每帧的 React、布局、绘制和编码耗时，跳过与输出的帧、帧间隔以及 %c span。
• 控制：暂停和恢复输出，切换布局线框，固定或自动适配网格大小，将帧复制为文本。

#安装

从 packages/devtools-extension 构建扩展，然后以解压缩形式加载：

bun run --cwd packages/devtools-extension build

1. 打开 chrome://extensions，启用开发者模式。
2. 点击加载已解压的扩展程序，选择 packages/devtools-extension/dist。
3. 重新加载应用并打开 DevTools。页面创建控制台根节点后，Text.js 面板就会出现。

构建还会生成 release/textjs-devtools-<version>.zip，可直接提交到 Chrome 应用商店。

#组件

选择组件可查看其 props、按调用顺序排列的 Hook（State、Ref、Memo、Effect 等，含当前值），以及它渲染的场景节点，包括以单元格为单位的位置、大小和盒内边距。悬停在某一行上会在控制台中高亮显示该节点。宿主节点用于显示或隐藏组件之间的 tx-box 和 tx-text 元素。

面板打开时，树会在提交后刷新。显示的值是摘要，并非实时对象。

#帧

帧检查器绘制渲染器的单元格缓冲区：每个字形、前景色、背景色和属性。悬停在单元格上会显示其字符和颜色、按绘制顺序位于其最上层的场景节点（遵循 overflow、滚动偏移和 zIndex），以及渲染该节点的组件。点击会在组件中选中该节点，并通过渲染器自身的高亮覆盖层在实时控制台中高亮显示它。

#时间线

每根柱表示渲染器的一帧：

跳过的帧以淡色显示：没有变化，因此没有输出日志。帧间隔图表以 66 ms 的最小间隔为参照，显示输出帧之间的间隔。

计时止于 console.log()。消息的格式化和绘制发生在 DevTools 内部，页面无法观测，因此时间线不显示这些耗时。在帧之间提交的并发渲染会计入提交次数，但不计时。

#工作原理

与 React DevTools 一样，扩展会在页面运行前安装一个全局 Hook：

globalThis.__TEXTJS_DEVTOOLS_HOOK__

每个控制台根节点创建时都会向它注册。未安装扩展时，这个 Hook 不存在，根节点只检查一次，不执行任何逐帧工作。安装扩展但关闭面板时，每帧的开销为一次属性读取。只有面板请求时才计算树和帧。

消息流向为页面 → 内容脚本 → Service Worker → 面板。内容脚本在每个页面上运行，确保 Hook 在应用启动前就已存在。这是扩展请求的唯一访问权限。扩展不加载远程代码，也不向本机之外发送任何内容。

#隐私

扩展不收集任何数据。不发起网络请求，不存储任何内容，也不做分析统计。组件树、帧和耗时数据仅在同一浏览器的页面与 DevTools 面板之间传递，关闭 DevTools 后即丢弃。点击复制帧会将该帧的文本写入剪贴板。

#限制

• 支持 Chrome 和基于 Chromium 的浏览器，版本需为 111 或更高。
• 安装扩展前已启动的应用需要重新加载。
• 仅检查标签页的顶层帧。
• 耗时来自 performance.now()，浏览器会将其精度降低到约 0.1 ms。