DevTools의 AI 지원과 에이전트용 DevTools(MCP)

두 방향의 AI

DevTools와 AI가 만나는 방식은 두 가지다.

MCP 자체의 개념과 Claude Code에 서버를 붙이는 법은 Claude Code 활용 가이드의 「MCP로 도구 연결하기」에 있다.

DevTools 안의 AI 지원

설정 > AI 혁신에서 기능별 토글을 켠다. 기능은 콘솔 인사이트(콘솔 오류·경고 설명)와 AI 지원(채팅) 두 가지다. 요건은 다음과 같다.

• 만 18세 이상, 지원 지역, 최신 Chrome, Google 계정으로 Chrome 로그인
• 설정 > 환경설정 > 모양 > 언어가 영어(미국)

AI 지원 패널로 묻기

기본 툴바 오른쪽의 AI 지원 버튼, 명령 메뉴의 AI, 또는 요소·네트워크·소스·성능 패널의 AI로 디버그(버튼이나 우클릭 메뉴)로 연다. 패널에서 열면 그 항목이 대화 컨텍스트로 잡힌다.

동작 방식에서 알아 둘 점:

• 에이전트는 답을 위해 웹 API를 호출하는 JavaScript를 생성·실행한다. 컨텍스트 없는 질문에는 Lighthouse 감사나 성능 트레이스 기록을 스스로 돌리기도 한다.
• 답 아래 생각 과정을 펼치면 실행한 코드 스니펫(콘솔에 복사해 다시 돌릴 수 있다)과 결과 위젯, 관련 패널로 가는 표시 버튼이 보인다.
• 부작용이 있는 코드는 실행 전에 대화가 일시중지된다. 코드를 읽고 계속 또는 취소를 누른다.
• 적용된 스타일 변경은 변경사항 패널에서 볼 수 있다. 작업공간 폴더를 연결해 두면 저장되지 않은 변경사항 > 작업공간에 적용으로 diff를 확인하고 로컬 CSS 파일에 저장한다. 작업공간 설정은 DevTools로 JavaScript 디버깅하기에 있다.
• 코딩 에이전트에 복사는 발견 내용을 요약한 실행 가능한 프롬프트를 만들어 준다. DevTools에서 찾은 원인을 Claude Code 같은 도구로 넘겨 소스를 고칠 때 쓴다.
• 대화 기록은 DevTools·Chrome을 다시 열어도 남는다.

코드 생성

콘솔이나 소스 패널에서 // Loop to check all img elements for valid alt attributes처럼 주석으로 의도를 쓰고 Cmd+I(Mac) / Ctrl+I를 누르면 코드를 생성한다. Tab이나 Enter로 받고 Esc로 버린다. 설정의 AI 혁신 > 코드 추천으로 켠다. 요소 > 스타일 창의 CSS 코드 완성도 같은 계열이다.

한계: 존재하지 않는 CSS 속성·클래스 이름을 그럴듯하게 지어내는 환각이 있고, 페이지나 입력에 담긴 지시를 따라가는 프롬프트 인젝션에 취약하다. 답은 늘 검증한다.

무엇이 Google로 가나

모든 AI 기능은 프롬프트(텍스트·이미지·스크린샷), 계정 인증 정보, 좋아요·싫어요 피드백을 보낸다. 여기에 컨텍스트별 데이터가 더해진다.

• 네트워크·콘솔 컨텍스트에서 Cookie, Set-Cookie, Authorization, X-로 시작하는 맞춤 헤더는 항상 빠진다. 콘솔 인사이트는 응답 본문도 보내지 않는다.
• 개인 계정은 기본값으로 데이터가 모델 개선과 사람 검토에 쓰일 수 있고, 익명화된 상태로 최대 18개월 보관된다. 프롬프트에 기밀이나 개인정보를 넣지 않는다.

끄는 법: DevToolsGenAiSettings

기업은 Google 관리 콘솔에서 정책으로 설정한다. 개인은 Chrome을 모두 종료하고 권장 정책을 직접 넣은 뒤 chrome://policy에서 값이 2인지 확인한다.

# macOS
defaults write com.google.Chrome DevToolsGenAiSettings -integer 2
# Linux: /etc/opt/chrome/policies/recommended/policies.json 에 {"DevToolsGenAiSettings": 2}
# Windows: HKEY_LOCAL_MACHINE\Software\Policies\Google\Chrome 의 DevToolsGenAiSettings = dword:00000002

에이전트용 Chrome DevTools (MCP 서버)

에이전트가 정적 HTML을 긁는 대신 살아 있는 브라우저를 열고, 클릭하고, 측정하게 하는 도구 모음이다. 세 부분으로 되어 있다.

준비물은 Node.js LTS와 npm, Chrome 안정화 버전이다. MCP를 지원하는 도구면 어디든 붙는다.

# Claude Code: 플러그인(MCP + 스킬)
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
# Gemini CLI
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
# Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

mcpServers 키를 쓰는 다른 클라이언트는 JSON에 직접 넣는다. 플래그는 args 배열에 이어 붙인다.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

설치 확인은 Check the performance of https://developers.chrome.com 같은 프롬프트로 한다. 브라우저 창이 뜨고 성능 트레이스가 기록되면 성공이다. 실패하면 Use the Chrome DevTools troubleshooting skill to fix my setup.으로 스킬에 맡긴다.

자주 쓰는 플래그

전체 목록은 구성 문서와 GitHub 저장소에 있다.

자동 연결: 내가 쓰던 브라우저 넘겨주기

기본값으로 서버는 새 Chrome 인스턴스를 띄운다. --autoConnect를 쓰면 지금 열린 Chrome에 붙어 탭, 로그인 세션, 확장 프로그램, 재현해 둔 오류 상태를 그대로 물려받는다.

1. 실행 중인 Chrome에서 chrome://inspect/#remote-debugging으로 가 원격 디버깅을 켠다.
2. args에 --autoConnect를 넣는다.
3. 에이전트가 연결할 때 Chrome이 띄우는 권한 대화상자에서 허용을 누른다.

SSO·VPN 뒤의 사내 대시보드처럼 에이전트가 로그인하지 못하는 페이지에 특히 쓸모 있다. 사람이 로그인해 문제 상황까지 가 둔 뒤 에이전트에게 넘긴다. 샌드박스라 자동 연결이 안 되면 --remote-debugging-port=9222 --user-data-dir=<별도 폴더>로 Chrome을 직접 띄우고 --browser-url로 붙는다.

쓰임새

메모리 분석에서 에이전트가 원본 .heapsnapshot 파일을 직접 읽게 두지 않는다. 컨텍스트 한도를 넘긴다. 분리된 노드가 의도된 캐시일 수도 있으니 수정 전에 사람에게 확인받게 한다. 패널에서 직접 하는 방법은 DevTools로 성능·메모리 분석하기에 있다.

서드파티 도구는 도구를 정의한 페이지 안에서만 돌고, 새로고침하거나 출처가 바뀌면 사라진다. DevTools가 탐색할 때마다 이벤트를 다시 보내 목록을 새로 받는다. 에이전트는 기본 도구를 먼저 고를 수 있으므로 이름과 설명을 구체적으로 쓴다.

보안과 전송 데이터

• 에이전트는 연결된 브라우저의 콘텐츠를 읽고 고칠 수 있다. 로그인된 세션에 붙이면 사실상 나를 대신해 행동한다. 자동 연결은 쿠키·저장소·열린 탭 전부를 넘겨주는 것이니 신뢰하는 에이전트에만 쓴다.
• 서버는 로컬 프로세스지만 기본값으로 사용 통계와 성능 트레이스의 URL(CrUX 실사용 데이터 조회용)을 Google로 보낸다. 끄려면 --no-usage-statistics, --no-performance-crux를 쓴다. 환경 변수 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS나 CI가 있어도 통계 수집이 꺼진다.

WebMCP 디버깅

WebMCP는 웹사이트가 자기 기능을 AI 에이전트가 호출할 수 있는 구조화된 도구로 내놓게 하는 제안 단계의 웹 표준이다. 도구는 HTML에 선언하거나(선언형) JavaScript로 등록한다(명령형). DevTools MCP 서버는 개발자용 디버깅 도구이고, WebMCP 도구는 브라우저 에이전트를 쓰는 모든 방문자가 호출한다는 점이 다르다. 쓰려면 사이트가 오리진 트라이얼에 등록돼 있거나 로컬 Chrome에서 WebMCP 플래그를 켜야 한다.

증상별로 보면, 출력 창의 오류는 스키마 위반이고, 호출 카운터가 0이면 에이전트가 도구를 고려하지 않은 것이다. 에이전트가 자꾸 잘못 호출하면 대개 스키마가 모호하다. 날짜 매개변수에 Date in YYYY-MM-DD format 같은 설명과 제약을 붙인다. 나머지 Application 패널 기능은 DevTools Application 패널: 저장소·서비스 워커에 있다.

정리

• DevTools 안의 AI는 이미 열어 둔 맥락(요소·요청·파일·트레이스)을 들고 묻는 도구다. 답은 검증하고, 부작용 있는 코드는 읽고 승인한다.
• 회사 코드나 민감한 페이지라면 무엇이 전송되는지 확인하고, 필요하면 DevToolsGenAiSettings로 끈다.
• 에이전트용 DevTools는 코딩 에이전트에게 눈과 손을 준다. 고친 뒤 브라우저에서 직접 확인하게 해 "완료" 주장을 증거로 바꾼다.
• 기본은 에이전트 전용으로 새로 띄운 브라우저다. 로그인 상태가 필요할 때만 자동 연결을 쓰고, 파일 접근과 네트워크 범위는 플래그로 좁힌다.

관련 노트: Claude Code 활용 가이드, AI 코딩 실무 가드레일, 루프 엔지니어링, 웹 성능 지표와 Lighthouse, DevTools로 성능·메모리 분석하기, DevTools로 기기·환경 에뮬레이션하기, Chrome DevTools