DevTools 확장 프로그램
콘솔 옆의 Text.js 패널: 컴포넌트 트리, 셀 단위 프레임 검사기와 프레임 타임라인.
Text.js DevTools 확장 프로그램은 콘솔 옆에 Text.js 패널을 추가해요. 콘솔에서 렌더링 중인 앱을 검사해요.
- 컴포넌트: 모든 콘솔 루트의 React 트리와 props, 훅, 키, 그리고 셀 단위로 배치된 내부
tx-box/tx-text장면 노드. - 프레임: 셀 그리드로 표시하는 현재 프레임. 셀 위에 마우스를 올려 어떤 컴포넌트가 그렸는지 확인하세요. 클릭해서 노드를 선택하세요. 실제 콘솔에서 해당 노드가 강조 표시돼요.
- 타임라인: 프레임별 React, 레이아웃, 페인트, 인코딩 시간, 건너뛴 프레임과 출력된 프레임, 프레임 간격과
%c스팬. - 제어: 출력 일시 정지와 재개, 레이아웃 와이어프레임 전환, 그리드 크기 고정 또는 맞춤, 프레임을 텍스트로 복사.
설치
확장 프로그램은 packages/devtools-extension에서 빌드한 후 압축 해제된 상태로 로드해요:
bun run --cwd packages/devtools-extension buildchrome://extensions를 열고 ‘개발자 모드’를 켜세요.- ‘압축해제된 확장 프로그램을 로드합니다’를 클릭하고
packages/devtools-extension/dist를 선택하세요. - 앱을 새로고침하고 DevTools를 여세요. 페이지가 콘솔 루트를 생성하면 Text.js 패널이 나타나요.
빌드하면 Chrome 웹 스토어에 제출할 수 있는 release/textjs-devtools-<version>.zip도 생성돼요.
컴포넌트
컴포넌트를 선택하면 props, 호출 순서대로 나열된 훅(State, Ref, Memo, Effect 등과 현재 값), 렌더링하는 장면 노드와 셀 단위의 위치, 크기, 박스 안쪽 여백을 확인할 수 있어요. 행 위에 마우스를 올리면 콘솔에서 노드가 강조 표시돼요. 호스트 노드는 컴포넌트 사이의 tx-box와 tx-text 요소를 표시하거나 숨겨요.
패널이 열려 있으면 커밋 후에 트리가 갱신돼요. 값은 표시용 요약이며 실시간 객체가 아니에요.
프레임
프레임 검사기는 렌더러의 셀 버퍼에 있는 모든 글리프, 전경색, 배경색, 속성을 그려요. 셀 위에 마우스를 올리면 문자와 색상, 그리기 순서상 가장 위에 있는 장면 노드(overflow, 스크롤 오프셋, zIndex 반영), 해당 노드를 렌더링한 컴포넌트가 표시돼요. 클릭하면 컴포넌트에서 해당 노드가 선택되고, 렌더러 자체의 강조 오버레이로 실제 콘솔에서 강조 표시돼요.
타임라인
막대 하나는 렌더러 프레임 하나를 나타내요:
| 단계 | 측정 대상 |
|---|---|
| React | 프레임 시작 시 처리되는 동기 React 작업 |
| 레이아웃 | Yoga 레이아웃 |
| 페인트 | 장면을 셀 버퍼로 래스터화하는 작업 |
| 인코딩 | %c 형식 문자열 생성과 console.log() 호출 |
건너뛴 프레임은 흐리게 표시돼요. 변경 사항이 없어 아무것도 기록하지 않은 프레임이에요. 프레임 간격 차트는 출력된 프레임 사이의 간격을 최소 간격인 66ms와 비교해 보여 줘요.
시간 측정은 console.log()에서 끝나요. 메시지 서식 지정과 페인트는 DevTools 내부에서 이루어져 페이지에서 관찰할 수 없으므로 타임라인에 표시하지 않아요. 프레임 사이에 커밋되는 동시 렌더링은 커밋 수에 포함되지만 시간은 측정하지 않아요.
작동 방식
React DevTools처럼 확장 프로그램은 페이지 실행 전에 전역 훅을 설치해요:
globalThis.__TEXTJS_DEVTOOLS_HOOK__모든 콘솔 루트는 생성될 때 이 훅에 등록돼요. 확장 프로그램이 없으면 훅도 없으며, 루트는 훅을 한 번만 확인하고 프레임별 작업은 하지 않아요. 확장 프로그램이 설치되어 있지만 패널이 닫혀 있으면 프레임당 속성 읽기 한 번만 수행해요. 트리와 프레임은 패널이 요청할 때만 계산해요.
메시지는 페이지 → 콘텐츠 스크립트 → 서비스 워커 → 패널 순서로 이동해요. 앱이 시작되기 전에 훅이 존재하도록 콘텐츠 스크립트는 모든 페이지에서 실행돼요. 확장 프로그램이 요청하는 접근 권한은 이것이 전부예요. 원격 코드를 로드하지 않으며 컴퓨터 밖으로 아무것도 전송하지 않아요.
개인정보 보호
확장 프로그램은 데이터를 수집하지 않아요. 네트워크 요청을 하지 않고, 아무것도 저장하지 않으며, 분석 기능도 없어요. 컴포넌트 트리, 프레임, 측정 시간은 같은 브라우저의 페이지와 DevTools 패널 사이에서만 이동하며, DevTools를 닫으면 폐기돼요. 프레임 복사를 클릭하면 프레임의 텍스트를 클립보드에 복사해요.
제한 사항
- Chrome 및 Chromium 기반 브라우저 버전 111 이상.
- 확장 프로그램 설치 전에 실행한 앱은 새로고침 필요.
- 탭의 최상위 프레임만 검사 가능.
- 브라우저가 정밀도를 약 0.1ms로 낮추는
performance.now()기반 시간 측정.