Chrome DevTools CLI

English | 한국어

터미널에서 Chrome을 완전히 제어하세요. 스크린샷부터 자동화, 성능 분석까지 — 브라우저 없이 모든 작업을 수행할 수 있습니다.

---

왜 Chrome DevTools CLI인가?

• 빠름 — 데몬 아키텍처로 브라우저 연결 재사용, 밀리초 단위 명령 실행
• 완전함 — 45+ 명령어로 Chrome 전체 기능 커버
• AI 최적화 — ref_id 기반 요소 접근, JSON 출력, Playwright 스크립트 생성

---

빠른 시작

# 설치
git clone https://github.com/anthropics/chrome-devtools-cli && cd chrome-devtools-cli
./scripts/install.sh

# 사용
chrome-devtools-cli navigate "https://example.com" --user-profile
chrome-devtools-cli screenshot -o page.png
chrome-devtools-cli click "#button"

---

주요 기능

브라우저 자동화

chrome-devtools-cli navigate "https://example.com"    # 페이지 이동
chrome-devtools-cli click --selector "#login"         # 요소 클릭
chrome-devtools-cli fill "user@test.com" -s "#email"  # 입력 필드 채우기
chrome-devtools-cli type "검색어" -s "#search" --delay 50  # 타이핑
chrome-devtools-cli press Enter                       # 키 입력
chrome-devtools-cli select --selector "#dropdown" --label "옵션"  # 드롭다운

AI 에이전트 최적화

# 페이지 요소 탐색 (ref_id 포함)
chrome-devtools-cli describe --interactable
# 출력: [i0] <button> "로그인" → #login-btn
#       [f1] <input> "이메일" → #email

# ref_id로 직접 요소 접근
chrome-devtools-cli click --ref i0               # interactive element 0
chrome-devtools-cli fill "test@email.com" --ref f1  # form element 1
chrome-devtools-cli hover --ref n2               # navigation element 2

# Vision AI용 라벨링
chrome-devtools-cli label -o labeled.png         # 스크린샷에 번호 오버레이

스크린샷 & PDF

chrome-devtools-cli screenshot -o page.png                  # 뷰포트
chrome-devtools-cli screenshot -o full.png --full-page      # 전체 페이지
chrome-devtools-cli screenshot -o el.png --selector "#hero" # 특정 요소
chrome-devtools-cli pdf -o page.pdf                         # PDF 내보내기

세션 녹화 & 이벤트 조회

# 브라우저 확장도구로 녹화 시작/중지
chrome-devtools-cli history events --user-profile --last 10m
chrome-devtools-cli history recordings --user-profile
chrome-devtools-cli history export --user-profile --format playwright

성능 분석

# CLI로 직접 트레이스 캡처
chrome-devtools-cli trace "https://example.com" -o trace.ndjson

# 또는 확장도구에서 Start Trace 버튼으로 녹화 시작/중지

# 트레이스 분석 (Core Web Vitals)
chrome-devtools-cli analyze trace.ndjson
# LCP 1.8s [Good] | CLS 0.03 [Good] | TTFB 280ms [Good]

디바이스 에뮬레이션

chrome-devtools-cli emulate "iPhone 14"
chrome-devtools-cli viewport 1920 1080 --pixel-ratio 2
chrome-devtools-cli devices                           # 8개 프리셋 목록

데이터 수집

chrome-devtools-cli network --domain api.example.com  # 네트워크 요청
chrome-devtools-cli console --filter error            # 콘솔 메시지
chrome-devtools-cli eval "document.title"             # JavaScript 실행
chrome-devtools-cli cookies list                      # 쿠키 조회

---

설치

자동 설치 (권장)

git clone https://github.com/anthropics/chrome-devtools-cli && cd chrome-devtools-cli
./scripts/install.sh

소스 빌드

git clone https://github.com/anthropics/chrome-devtools-cli && cd chrome-devtools-cli
cargo build --release
cp target/release/chrome-devtools-cli ~/.local/bin/

요구사항: Rust 1.92.0+

---

설정

설정 파일

~/.config/chrome-devtools-cli/config.toml:

[browser]
headless = true
port = 9222

[performance]
navigation_timeout_seconds = 30

[output]
default_screenshot_format = "png"
screenshot_quality = 90

설정 명령어

chrome-devtools-cli config init    # 기본 설정 생성
chrome-devtools-cli config show    # 현재 설정 표시
chrome-devtools-cli config edit    # 에디터로 편집

우선순위: CLI 옵션 > 환경변수 > 설정 파일

---

명령어 참조

네비게이션

명령어	설명
navigate <url>	URL 이동
reload	페이지 새로고침
back	뒤로 가기
forward	앞으로 가기
stop	브라우저 세션 중지

페이지 관리

명령어	설명
pages	열린 페이지 목록
select-page <index>	활성 페이지 선택
new-page	새 페이지 생성
close-page <index>	페이지 닫기

인터랙션

명령어	설명
click [--selector <sel>] [--ref <ref>]	요소 클릭
hover [--selector <sel>] [--ref <ref>]	요소 호버
fill <text> [--selector <sel>] [--ref <ref>]	입력 필드 채우기
type <text> [--selector <sel>] [--ref <ref>]	타이핑 (딜레이)
press <key>	키 입력
scroll [--selector <sel>] [--ref <ref>]	요소로 스크롤
select [--selector <sel>] [--ref <ref>]	드롭다운 선택
dialog	JavaScript 다이얼로그 처리
wait <selector>	조건 대기

AI 에이전트

명령어	설명
describe [-i] [-f] [-n]	요소 탐색 (ref_id 포함)
label [-o <path>]	Vision AI용 라벨 오버레이
a11y [--interactable]	접근성 트리

캡처 & 분석

명령어	설명
screenshot	스크린샷
pdf	PDF 내보내기
trace <url>	성능 트레이스 캡처
analyze <file>	트레이스 분석 (Core Web Vitals)

DOM & 디버깅

명령어	설명
query <selector>	요소 검색
inspect <selector>	요소 속성 검사
dom	DOM 트리 구조
listeners	이벤트 리스너 조회
html	페이지 HTML
eval <expr>	JavaScript 실행

데이터 수집

명령어	설명
console	콘솔 메시지
network	네트워크 요청
cookies	쿠키 관리
storage	브라우저 스토리지

디바이스 에뮬레이션

명령어	설명
emulate <device>	디바이스 에뮬레이션
viewport <w> <h>	뷰포트 크기 설정
devices	사용 가능 디바이스 목록

히스토리 & 세션

명령어	설명
history events	이벤트 조회
history export	Playwright 스크립트 생성
session-info	현재 세션 정보
session	세션 관리 (데몬 모드)
auth	인증 상태 관리

설정 & 서버

명령어	설명
config	설정 관리
server	데몬 서버 관리

공통 옵션

• --json — JSON 출력
• --user-profile — 사용자 프로필 세션 유지
• --headless=false — 브라우저 창 표시
• --last <duration> — 시간 필터 (예: 10m, 2h)
• --ref <ref> — describe 결과의 ref_id로 요소 접근

---

서버 모드

chrome-devtools-cli server start   # 데몬 시작
chrome-devtools-cli server status  # 상태 확인
chrome-devtools-cli server stop    # 데몬 중지

---

문제 해결

브라우저 연결 실패

chrome-devtools-cli server stop
rm -f ~/.config/chrome-devtools-cli/session.toml

Chrome 재설치

./scripts/install.sh --reinstall-chrome

디버그

RUST_LOG=debug chrome-devtools-cli navigate "https://example.com"

---

지원

• GitHub Issues
• 개발자 가이드

---

English | 한국어

Made with Rust