Chrome DevTools for agents는 Chrome DevTools의 기능을 AI 코딩 워크플로에 제공하는 도구 모음입니다. 상담사를 위한 Chrome DevTools를 설치하면 다음 기능에 액세스할 수 있습니다.
- MCP 서버: 오픈소스 모델 컨텍스트 프로토콜을 사용하여 AI 에이전트를 라이브 브라우저 인스턴스에 연결합니다.
- Chrome DevTools CLI: 터미널에서 직접 브라우저와 상호작용하는 인터페이스입니다.
- 에이전트형 기술: 접근성 또는 성능 디버깅과 같은 복잡한 작업을 위해 여러 도구를 조정하는 방법을 에이전트에게 알려주는 전문가의 요청 사항입니다.
웹 개발과 관련하여 에이전트용 Chrome DevTools는 디버깅 기능을 AI 에이전트에 통합합니다.
예를 들어 에이전트는 도구를 사용하여 성능 트레이스를 기록하고 평가하여 웹사이트의 성능을 분석하고 개선할 수 있는 부분을 파악할 수 있습니다. 웹 개발 외에도 에이전트용 DevTools를 사용하면 에이전트가 정적 HTML을 가져오는 대신 라이브 웹을 탐색할 수 있습니다.
설정
이 가이드에서는 상담사가 코딩 에이전트가 라이브 Chrome 브라우저를 제어하고 검사할 수 있도록 Chrome DevTools를 설정하는 방법을 보여줍니다.
chrome-devtools-mcp 패키지를 사용하여 코딩 에이전트 (예: Gemini, Claude, Cursor, Copilot)에서 실행 중인 Chrome 브라우저를 제어하고 검사합니다. 상담사를 위한 Chrome DevTools는 전체 제품군을 제공하지만 CLI는 셸 기반 자동화를 위한 타겟팅된 하위 집합만 지원합니다.
지원되는 IDE 및 모델
상담사를 위한 Chrome DevTools는 MCP 프로토콜을 지원하는 모든 도구 또는 IDE를 지원합니다. 여기에는 Antigravity, Gemini CLI, Claude Code, Cursor, Copilot 등이 포함됩니다.
보안 고려사항
에이전트는 액세스하는 페이지를 보고 상호작용할 수 있으므로 활성 상태의 인증된 세션이 있는 브라우저에 연결하면 사용자를 대신하여 효과적으로 작업을 수행할 수 있습니다. 상담사와 공유하고 싶지 않은 민감한 정보나 개인 정보는 공유하지 마세요.
기본 요건
에이전트용 Chrome DevTools를 설치하기 전에 환경이 다음 요구사항을 충족하는지 확인하세요.
상담사를 위해 Chrome DevTools를 설정하려면 원하는 코딩 환경에 맞는 방법을 선택하세요. 일부 에이전트는 수동으로 설치해야 하지만 다른 에이전트는 도구와 함께 사전 통합되어 제공됩니다.
Antigravity
상담사를 위한 Chrome DevTools는 Antigravity 2.0과 함께 사전 번들로 제공됩니다. 브라우저 하위 에이전트를 사용하여 즉시 사용할 수 있습니다. 다음과 같은 슬래시 명령어를 사용해 보세요.
/browser Navigate to the Google homepage
전문 에이전트 기술에 액세스하려면 초기 설정의 Google로 빌드 단계 또는 애플리케이션 설정 내에서 DevTools 플러그인을 설치하는 것이 좋습니다. 자세한 내용은 Antigravity Browser 하위 에이전트 문서를 참고하세요.
CLI를 사용하여 설치
에이전트용 Chrome DevTools를 설정하려면 에이전트가 지원하는 경우 JSON 구성 파일이나 CLI 명령어를 사용하여 서버를 직접 설치하면 됩니다. 일부 에이전트는 에이전트 기술, 에이전트가 DevTools 기능을 사용하는 데 도움이 되는 전문가 안내가 포함된 공식 확장 프로그램 또는 플러그인도 제공합니다.
에이전트가 여기에 나열되어 있지 않으면 Chrome DevTools for Agents GitHub 저장소에서 설치 방법을 확인하세요.
명령줄 에이전트에 에이전트용 Chrome DevTools를 추가하려면 특정 에이전트의 기본 제공 CLI 명령어를 사용하세요.
Gemini CLI
다음 명령어를 사용하여 MCP 패키지와 함께 제공되는 스킬이 포함된 Gemini CLI 확장 프로그램을 설치합니다.
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
다음 명령어를 사용하여 MCP 패키지만 설치합니다.
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
에이전트용 Chrome DevTools를 Claude Code 플러그인으로 설치하려면 Claude Code에서 다음 슬래시 명령어를 사용하세요. 마켓 레지스트리를 추가합니다.
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
마켓 레지스트리에서 플러그인을 설치합니다.
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
자세한 내용은 공식 Chrome DevTools Claude 플러그인 페이지를 참고하세요.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
JSON 구성을 사용하여 설치
mcpServers 구성 키를 지원하는 다른 에이전트의 경우 이 항목을 수동으로 추가하고 npm i
chrome-devtools-mcp를 통해 에이전트용 DevTools를 설치해야 합니다.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
다른 에이전트에 설치
나열되지 않은 에이전트를 구성하려면 Chrome DevTools MCP GitHub 저장소를 참고하세요.
설정 테스트
에이전트에 다음 프롬프트를 입력하여 모든 것이 작동하는지 확인합니다.
Check the performance of https://developers.chrome.com
에이전트가 브라우저 창을 열고 성능 트레이스를 기록해야 합니다.
설정 문제 해결
에이전트가 도구를 실행하지 못하고 Chrome DevTools 기술에 액세스할 수 있는 경우 문제를 자동으로 해결하려고 시도할 수 있습니다. 그렇지 않은 경우 에이전트에게 명시적으로 프롬프트를 표시할 수 있습니다.
Use the Chrome DevTools troubleshooting skill to fix my setup.
또는 다음과 같이 더 구체적으로 지정할 수도 있습니다.
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
고급 구성
다음은 에이전트가 브라우저에 액세스할 수 있는 다른 방법입니다.
헤드리스 모드 구성
표시되는 브라우저 창 없이 백그라운드 작업을 실행하려면 헤드리스 (UI 없음) 모드에서 Chrome을 실행하면 됩니다. 서버 인수에 --headless 플래그를 추가합니다.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
기존 브라우저 세션에 연결
기본적으로 에이전트용 DevTools는 새 Chrome 인스턴스를 시작합니다. 하지만 --autoConnect 플래그를 사용하여 에이전트를 기존 브라우저 세션에 연결할 수 있습니다. 이 기능은 에이전트가 로그인 또는 이미 시작한 세션 뒤에 있는 문제를 조사해야 하는 경우에 특히 유용합니다.
기존 세션에 연결하는 방법에는 두 가지가 있습니다.
자동 연결 사용 (Chrome 144 이상)
Chrome DevTools MCP 서버가 --autoConnect 옵션으로 구성되면 MCP 서버가 활성 Chrome 인스턴스에 연결되어 원격 디버깅 세션을 요청합니다.
- 실행 중인 Chrome 브라우저에서
chrome://inspect/#remote-debugging로 이동하여 원격 디버깅을 사용 설정합니다. --autoConnect플래그를 포함하도록 MCP 구성을 업데이트합니다.{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }에이전트에게 프롬프트를 입력합니다. Chrome에 원격 디버깅 세션을 허용하는 사용자 권한을 요청하는 대화상자가 표시됩니다. 허용을 클릭합니다.
원격 디버깅 포트를 사용하여 수동으로 연결
--autoConnect를 사용할 수 없는 경우 (예: 샌드박스 환경 내에서 에이전트를 실행하는 경우) 디버깅 포트를 사용하여 Chrome을 수동으로 시작할 수 있습니다.
다음은 macOS의 예입니다.
원격 디버깅 포트가 사용 설정된 상태로 Chrome 브라우저를 시작합니다. 보안상의 이유로 맞춤 사용자 데이터 디렉터리도 지정해야 합니다.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable--browser-url매개변수를 사용하여 연결하도록 에이전트를 구성합니다.{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }