설치
Text.js 앱을 만들고 DevTools를 열어 콘솔을 설정하세요.
요구 사항
- Bun 1.2+ 또는 Node.js 22+
- 데스크톱의 Chrome, Edge, Firefox 또는 Safari
앱 만들기
bunx create-text-app@latest템플릿(starter, dashboard 또는 opencode)을 선택한 다음 개발 서버를 시작하세요:
cd my-appbun installbun dev콘솔 열기
http://localhost:3000에 접속하고 콘솔을 여세요.
| 브라우저 | macOS | Windows / Linux |
|---|---|---|
| Chrome, Edge, Arc, Brave | ⌘ ⌥ J | Ctrl Shift J |
| Firefox | ⌘ ⌥ K | Ctrl Shift K |
| Safari | ⌘ ⌥ C | macOS 전용 |
Safari에서는 먼저 ‘설정’ → ‘고급’에서 ‘웹 개발자용 기능 보기’를 켜세요.
페이지를 클릭해 포커스를 맞춘 다음 입력하세요. DevTools를 하단에 배치하면 그리드를 가장 넓게 사용할 수 있어요.
콘솔 설정
콘솔 설정에서 ‘로그 보존’을 끄세요. Text.js는 프레임마다 메시지 하나를 덧붙이고 콘솔을 비워 이전 프레임을 해제해요. ‘로그 보존’이 켜져 있으면 DevTools가 콘솔 비우기를 무시해서 이전 프레임이 쌓여요.
수동 설정
bun add @textjs/app react react-dompackage.jsonjson
{ "scripts": { "dev": "text dev", "build": "text build", "start": "text start" }}app/page.tsxtsx
import { Text } from "@textjs/app";export default function Page() { return <Text className="p-1">Hello from console.log</Text>;}프레임워크 없이 사용하기
기존 사이트에서 원하는 React 트리를 콘솔에 마운트하세요:
main.tsxtsx
import { renderToConsole, Box, Text } from "@textjs/react";await renderToConsole( <Box className="border rounded p-1"> <Text bold>Hello, DevTools</Text> </Box>, { width: 100, height: 32 },);