Extensão do DevTools

A extensão Text.js DevTools adiciona um painel Text.js ao lado do Console. Ela inspeciona o app que está renderizando no console.

• Componentes: a árvore React de cada raiz do console, com props, hooks, chaves e os nós de cena tx-box / tx-text por trás deles, dispostos em células.
• Quadro: o quadro atual como uma grade de células. Passe o cursor sobre uma célula para ver qual componente a pintou. Clique para selecionar o nó. Ele fica destacado no console ao vivo.
• Linha do tempo: tempos de React, layout, pintura e codificação por quadro, quadros ignorados versus emitidos, cadência dos quadros e spans %c.
• Controles: pausar e retomar a saída, alternar o wireframe do layout, fixar ou ajustar o tamanho da grade, copiar o quadro como texto.

#Instalação

A extensão é compilada a partir de packages/devtools-extension e carregada sem compactação:

bun run --cwd packages/devtools-extension build

1. Abra chrome://extensions e ative o Modo do desenvolvedor.
2. Clique em Carregar sem compactação e selecione packages/devtools-extension/dist.
3. Recarregue seu app e abra o DevTools. O painel Text.js aparece assim que a página cria uma raiz do console.

O build também gera release/textjs-devtools-<version>.zip, pronto para a Chrome Web Store.

#Componentes

Selecione um componente para ver suas props, seus hooks na ordem de chamada (State, Ref, Memo, Effect e assim por diante, com os valores atuais) e o nó de cena que ele renderiza, com posição, tamanho e recuos da caixa em células. Passar o cursor sobre uma linha destaca o nó no console. Nós host mostra ou oculta os elementos tx-box e tx-text entre os componentes.

A árvore é atualizada após os commits enquanto o painel está aberto. Os valores são resumos para exibição, não objetos ao vivo.

#Quadro

O inspetor de quadros desenha o buffer de células do renderizador: cada glifo, cor de primeiro plano, fundo e atributo. Passar o cursor sobre uma célula informa seu caractere e suas cores, o nó de cena sobre ela na ordem de pintura (respeitando overflow, deslocamentos de rolagem e zIndex) e os componentes que renderizaram esse nó. Clicar seleciona o nó em Componentes e o destaca no console ao vivo com a própria sobreposição de destaque do renderizador.

#Linha do tempo

Cada barra é um quadro do renderizador:

Os quadros ignorados aparecem esmaecidos: nada mudou, então nada foi registrado. O gráfico de cadência mostra o intervalo entre os quadros emitidos em relação ao intervalo mínimo de 66 ms.

A medição dos tempos termina em console.log(). A formatação e a pintura da mensagem acontecem dentro do DevTools e não podem ser observadas pela página, por isso a linha do tempo não as mostra. Renderizações concorrentes que fazem commit entre quadros são contadas como commits, sem medição de tempo.

#Funcionamento

Assim como o React DevTools, a extensão instala um hook global antes de a página executar:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

Cada raiz do console se registra nele ao ser criada. Sem a extensão, o hook não existe, e uma raiz só verifica sua presença uma vez, sem executar trabalho por quadro. Com a extensão instalada, mas com o painel fechado, cada quadro custa uma leitura de propriedade. Árvores e quadros só são calculados quando o painel os solicita.

As mensagens seguem o fluxo página → script de conteúdo → service worker → painel. Os scripts de conteúdo executam em todas as páginas para que o hook exista antes de seu app iniciar. Esse é o único acesso que a extensão solicita. Ela não carrega código remoto nem envia nada para fora da máquina.

#Privacidade

A extensão não coleta dados. Ela não faz requisições de rede, não armazena nada e não tem análise de uso. Árvores de componentes, quadros e medições de tempo trafegam apenas entre a página e o painel do DevTools no mesmo navegador e são descartados quando você fecha o DevTools. Copiar quadro grava o texto do quadro na sua área de transferência quando você clica nele.

#Limitações

• Chrome e navegadores baseados em Chromium, versão 111 ou posterior.
• Apps iniciados antes da instalação da extensão precisam ser recarregados.
• Apenas o quadro de nível superior de uma aba é inspecionado.
• Os tempos vêm de performance.now(), cuja precisão os navegadores reduzem para cerca de 0,1 ms.