Chrome DevTools MCP로 에이전트 브라우저 검수 설계하기

브라우저를 조작하는 에이전트는 클릭에 성공했다고 작업이 끝나지 않습니다. 콘솔 오류, 네트워크 실패, 화면 상태, 성능 흔적까지 확인해야 합니다. Chrome DevTools MCP 공식 README는 Chrome DevTools 기능을 MCP 서버로 노출해 코딩 에이전트가 이 검수면에 접근하도록 합니다.

자동화와 검수는 다른 단계다

일반 브라우저 자동화는 URL을 열고 요소를 클릭하는 데 집중합니다. Chrome DevTools MCP는 Puppeteer 기반 자동화와 함께 네트워크 요청, 스크린샷, 콘솔 메시지, 성능 트레이스와 인사이트를 다루는 기능을 제시합니다.

실무 흐름은 다음처럼 나누는 편이 좋습니다.

1. 에이전트가 페이지를 열고 필요한 상호작용을 수행합니다.
2. 콘솔과 네트워크에서 실패 신호를 수집합니다.
3. 스크린샷과 성능 결과를 기준으로 화면을 검수합니다.
4. 수정 후 같은 절차를 반복해 회귀를 확인합니다.

클릭 성공 여부만 검사하면 자바스크립트 예외나 API 200 이외의 상태를 놓칠 수 있습니다.

MCP 설정은 최소 권한부터 시작한다

공식 README의 기본 설정은 다음과 같습니다.

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

간단한 브라우저 작업만 필요하면 --slim --headless 모드도 제공됩니다. 반대로 MCP 클라이언트에 브라우저 내용을 노출하면 페이지의 민감한 정보와 개발자 도구 데이터도 함께 전달될 수 있습니다. 테스트 전용 브라우저 프로필과 비식별 테스트 데이터를 사용하는 것이 기본값이어야 합니다.

사용 통계와 외부 데이터 경계

공식 문서는 사용 통계가 기본 활성화이며 --no-usage-statistics로 끌 수 있다고 설명합니다. 성능 도구가 CrUX API의 현장 데이터를 사용할 수 있다는 점도 명시합니다. 조직 환경에서는 기능을 켜는 것보다 다음 항목을 먼저 결정해야 합니다.

• 어떤 페이지와 데이터가 에이전트 컨텍스트에 들어가는가
• 사용 통계를 허용할지와 비활성화 기준
• 성능 트레이스의 외부 전송 여부
• 테스트 계정과 운영 계정의 분리
• 실패한 검수 결과를 저장할 위치

검증 기준

에이전트 기반 웹 검수의 최소 결과표는 다음이면 충분합니다.

영역	확인할 결과
화면	핵심 요소 표시, 가로 넘침, 스크린샷
콘솔	예외·경고·소스맵 위치
네트워크	실패 요청, 응답 시간, 리다이렉트
성능	트레이스와 개선 인사이트
보안	노출 데이터와 브라우저 권한

이 도구는 테스트를 자동으로 “통과”시켜 주는 제품이 아닙니다. 에이전트가 수집한 증거를 어떤 기준으로 판정할지 별도 체크리스트가 필요합니다.

• Chrome DevTools MCP 저장소
• Chrome DevTools MCP 공식 블로그