에이전트용 Chrome DevTools에는 코딩 에이전트 또는 사용자가 DevTools 도구를 표준 셸 명령어로 실행할 수 있는 명령줄 인터페이스(CLI)가 포함되어 있습니다. 에이전트는 MCP 서버를 통해 도구를 동적으로 호출하는 대신 동일한 작업을 셸 명령어로 작성하고 언제든지 다시 실행할 수 있는 스크립트로 연결할 수 있습니다. 예를 들어 에이전트가 다음과 같은 스크립트를 생성할 수 있습니다.
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
MCP 서버와 CLI는 모두 동일한 엔진에 연결됩니다. 이 엔진은 Chrome DevTools 프로토콜(CDP)을 통해 Chrome과 통신하는 영구 백그라운드 데몬입니다. 차이점은 에이전트가 해당 엔진에 도달하는 방식입니다.
- MCP 서버: 에이전트는 JSON-RPC를 사용하여 표준 입력/출력을 통해 연결하고 모든 브라우저 도구를 대화형 함수 호출로 처리합니다.
- CLI: 에이전트가 동일한 백그라운드 데몬에 대해 셸 명령어를 직접 실행합니다.
CLI를 사용하여 다음 작업을 할 수 있습니다.
- 워크플로 저장: 탐색적 디버깅 세션 중에 에이전트가 수행한 작업을 재사용 가능한 스크립트로 변환합니다.
- 애플리케이션 상태 재현: 스크립트를 다시 실행하여 브라우저를 알려진 상태로 되돌린 후 다시 디버깅합니다.
- 일괄 작업: 각 단계 사이에 대화 차례 없이 일련의 탐색, 입력, 에뮬레이션, 검사 명령어를 실행합니다.
- AI 에이전트 없이 스크립트 실행: 활성 LLM 세션이나 MCP 클라이언트 없이도 셸 스크립트를 실행할 수 있는 모든 터미널, 하위 셸 또는 CI 컨테이너에서 생성된 스크립트를 실행합니다.
CLI와 MCP 서버 중에서 선택
CLI와 MCP 서버 중 무엇을 선택할지는 비용, 컨텍스트, 워크플로에 관한 엔지니어링 결정입니다.
- 컨텍스트 윈도우 비용: MCP 서버를 등록하면 모든 도구 정의와 JSON 스키마가 모든 대화에서 LLM의 시스템 프롬프트에 삽입됩니다. CLI 기술을 사용하면 에이전트는 압축된 마크다운 요약만 로드하고 전체 기술을 읽고 필요한 명령어를 구성하기로 결정할 때 토큰 비용을 지불합니다. 긴 멀티턴 에이전트 세션의 경우 이러한 차이가 비용과 지연 시간 모두에 영향을 미칩니다.
- 탐색과 실행: MCP 도구는 개발자나 에이전트가 무엇을 검사해야 하는지 아직 모르는 경우 동적 탐색 디버깅에 탁월합니다. 에이전트는 사용 가능한 모든 도구를 미리 알고 있으므로 목표를 달성하기 위해 도구를 사용할 가능성이 높습니다. 경로를 이미 알고 있는 경우 CLI를 사용하면 필요한 단계만 실행할 수 있습니다.
- 재사용성: CLI 스크립트를 저장하거나, 기술에서 재사용하거나, 에이전트 루프 외부에서 수동으로 실행할 수 있습니다. MCP 도구 호출로는 이 작업을 할 수 없습니다.
| 다음과 같은 경우 MCP 서버를 사용하세요. | CLI를 사용하는 경우 |
|---|---|
| 알 수 없는 문제를 조사 중이며 사용 가능한 전체 도구 상자가 필요합니다. | 이미 단계를 알고 있으며 이를 안정적으로 반복하고 싶습니다. |
| 실시간 동적 문제 해결과 심층적인 브라우저 검사가 필요합니다. | 토큰 효율적인 에이전트 기술 또는 터미널 기반 자동화가 필요한 경우 |
| 에이전트가 MCP를 지원하는 IDE 또는 클라이언트에서 실행됩니다. | 사용 중인 환경에서 MCP 클라이언트를 지원하지 않습니다. |
CLI를 사용할 때는 다음 사항에 유의하세요.
- 도구 범위: CLI는 셸 기반 자동화를 위한 에이전트용 Chrome DevTools 도구 대부분을 지원합니다. 전체 명령어 목록은 CLI 기술 참조를 확인하세요.
- 암시적 시작: 백그라운드 서버는 처음 사용할 때 자동으로 시작됩니다. 각 명령어 전에
start,status또는stop를 실행할 필요가 없습니다. - 영구 상태: 브라우저 상태는 명령어 전반에 걸쳐 유지되므로 한 명령어에서 연 페이지는 명시적으로 닫지 않는 한 다음 명령어에서도 계속 사용할 수 있습니다.
- 페이지 ID 및 요소 UID: 대부분의 명령어는 페이지 ID를 첫 번째 인수로 사용합니다.
chrome-devtools list_pages를 실행하여 찾고chrome-devtools take_snapshot를 실행하여 상호작용하려는 요소의 UID를 가져옵니다. - 출력 형식: 출력은 기본적으로 일반 마크다운과 유사한 텍스트입니다. 다른 스크립트나 CI 파이프라인에서 결과를 사용하려면
--output-format=json를 전달합니다. - 파일 액세스: 기본적으로 CLI에는 파일 저장 매개변수 및
upload_file에 대한 전체 파일 시스템 액세스 권한이 있습니다.--allowUnrestrictedPaths=false를 전달하여 파일 액세스를 OS 임시 디렉터리로 제한합니다. - CI의 Lighthouse: CLI에서
lighthouse_audit를 실행할 수 있지만 CI에서 Lighthouse 점수만 필요한 경우 독립형 Lighthouse CLI 및 GitHub Actions가 더 가볍습니다. - 브라우저 자동화 스크립트보다 간단한 추상화: JavaScript 또는 TypeScript로 전체 Puppeteer 또는 Playwright 스크립트를 작성하는 것과 달리 DevTools CLI는 제한적이고 타겟팅이 명확한 API 노출 영역을 제공합니다. 이 셸 문법은 사람이 읽고 유지관리하기가 더 쉽고, 하위 모델에서도 할루시네이션 없이 안정적으로 생성하기가 훨씬 더 쉽습니다.
기본 요건
CLI를 사용하기 전에 다음 사항을 확인하세요.
- 에이전트용 Chrome DevTools 설치됨: 시작 가이드를 따르세요. 에이전트별 플러그인 및 확장 프로그램(예: Gemini CLI 확장 프로그램)에는 MCP 서버와 함께 에이전트 기능이 포함됩니다.
- 셸에서 사용할 수 있는 CLI: 설치는 일회성 단계이며 일반적인 에이전트 워크플로의 일부가 아닙니다. 설치 참조를 확인하세요.
chrome-devtools-cli스킬(에이전트용 Chrome DevTools와 함께 설치됨): 이 스킬은 에이전트에게 CLI를 사용하여 셸 스크립트를 작성하거나 셸 명령어를 실행하는 방법을 알려줍니다.
명령어 구조
명령어는 chrome-devtools <tool> [arguments] [flags] 패턴을 따릅니다.
필수 인수는 위치 인수이고 선택적 인수는 플래그를 사용합니다. 자세한 내용은 명령어에 --help를 사용하세요.
예를 들면 다음과 같습니다.
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Chrome DevTools CLI 사용 사례
에이전트에게 모든 세션에서 동일한 브라우저 흐름을 다시 해결하는 대신 이미 파악한 단계를 스크립트로 캡처하도록 지시합니다.
디버깅 세션을 재사용 가능한 스크립트로 저장
MCP를 통한 탐색적 디버깅 세션 후에는 동일한 문제가 다시 발생하지 않는다고 보장할 수 없는 경우가 많습니다. 다음에 재현 단계를 다시 설명하는 대신 에이전트에게 방금 실행한 흐름을 기록해 달라고 요청하세요.
프롬프트 예시:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
에이전트 실행 예시: 에이전트가 세션 중에 수행한 탐색, 입력, 검사 단계를 검토하고 이를 chrome-devtools 명령어 시퀀스(예: new_page, take_snapshot, fill, click, list_console_messages)로 변환합니다. 스크립트를 test.sh로 저장합니다. 다음에 이 영역을 디버깅할 때 에이전트가 스크립트를 가리키도록 하여 동일한 상태에 다시 도달하거나 에이전트 루프 외부에서 실행하여 수동으로 디버깅할 수 있습니다.
조사 전에 애플리케이션 상태 재현
여러 단계로 구성된 결제 또는 필터링된 대시보드와 같은 복잡한 상태는 에이전트가 매번 대화식으로 다시 빌드하는 데 비용이 많이 듭니다. 저장된 스크립트를 새 조사의 시작점으로 사용합니다.
프롬프트 예시:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
에이전트 실행 예시: 에이전트가 스크립트를 실행하여 결제로 이동하고 주소 양식을 작성하고 배송 옵션을 선택합니다. 브라우저 상태는 명령어 전반에서 유지되므로 에이전트는 동일한 페이지에서 take_snapshot 및 evaluate_script를 사용하여 버튼의 상태와 결제 선택기에 연결된 이벤트 핸들러를 검사합니다.
표시 영역 전반의 시각적 검사 일괄 처리
여러 화면 크기에서 레이아웃 변경사항을 확인하는 작업은 반복적이며 일반적으로 수동으로 이루어집니다. 에이전트에게 에뮬레이션 설정을 적용하고 한 번의 실행으로 각 설정에 대한 증거를 캡처하는 스크립트를 요청합니다.
프롬프트 예시:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
에이전트 실행 예시: 에이전트가 각 표시 영역에 대해 chrome-devtools emulate 1 --viewport "<size>"를 호출한 후 chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png"를 호출하는 루프를 작성합니다. 대화를 열지 않고도 CSS를 변경할 때마다 스크립트를 다시 실행할 수 있습니다.
MCP 클라이언트를 사용할 수 없는 흐름의 스모크 테스트
CI 컨테이너 또는 잠긴 엔터프라이즈 설정과 같은 일부 환경에서는 MCP 클라이언트를 지원하지 않습니다. 거의 모든 터미널, 하위 셸, CI 컨테이너, 에이전트 프레임워크는 표준 셸 스크립트 실행 및 stdout 읽기를 지원하므로 CLI는 이러한 위치에서 가벼운 검사에 적합합니다.
프롬프트 예시:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
에이전트 실행 예시: 에이전트가 new_page, take_snapshot, fill, click를 사용하는 스크립트를 작성한 다음 list_console_messages 1
--types error --output-format=json를 호출하고 JSON 출력을 파싱하여 종료 코드를 결정합니다.
워크플로를 경량 스킬로 패키징
프로젝트 또는 팀원 간에 유용한 흐름이 있는 경우 에이전트가 스크립트를 기술로 래핑할 수 있습니다. 이것이 바로 DevTools CLI 스킬입니다. 에이전트가 모든 도구에 대한 선불 토큰 비용을 지불하지 않고도 특정 브라우저 명령어를 실행할 수 있는 가벼운 참조입니다.
프롬프트 예시:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
에이전트 실행 예시: 에이전트가 이름, 스킬이 적용되는 시점에 대한 한 줄 설명, 스크립트를 참조하는 요청 사항을 사용하여 SKILL.md를 만듭니다. 이후 세션에서 에이전트는 작업이 설명과 일치하는 경우에만 전체 스킬을 읽습니다.