# AI 에이전트를 위한 Chrome DevTools (MCP)

> Clean Markdown view of GeekNews topic #23284. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=23284](https://news.hada.io/topic?id=23284)
- GeekNews Markdown: [https://news.hada.io/topic/23284.md](https://news.hada.io/topic/23284.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-09-26T09:54:52+09:00
- Updated: 2025-09-26T09:54:52+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/chrome-devtools-mcp)
- Points: 14
- Comments: 1

## Summary

Google의 **Chrome DevTools MCP 서버**가 공개되어, **AI 코딩 에이전트**가 실시간으로 **브라우저 디버깅·성능 분석**에 직접 접근할 수 있게 되었습니다. 기존에는 AI가 코드 변경 후 실제 **네트워크, 콘솔, DOM, 성능 데이터**를 확인하지 못해 한계가 있었으나, 이번 업데이트를 통해 **실행 결과 검증, 자동 오류 분석, 사용자 동작 시뮬레이션, 성능 감사** 등 다양한 자동화가 가능해집니다.

## Topic Body

- **Chrome DevTools MCP 서버**의 공개 프리뷰 버전 출시로 AI 코딩 에이전트가 **크롬 DevTools의 디버깅 및 성능 기능을 사용**할 수 있게 됨  
- 기존에는 에이전트가 코드 실행 결과를 확인하지 못했지만, 이제는 **네트워크, 콘솔, DOM, 성능 추적** 등 실제 런타임 데이터를 활용 가능해짐  
- **DevTools MCP 서버**를 활용하면 **실시간 코드 검증**, **네트워크·콘솔 오류 분석**, **사용자 동작 시뮬레이션**, **스타일·레이아웃 디버깅**, **자동 성능 감사**등 다양한 자동화가 가능해짐  
- 개발자는 MCP 클라이언트 설정에 서버를 추가해 바로 사용할 수 있으며, 예시 프롬프트로 **LCP 확인**이나 **폼 제출 오류 진단** 등을 실행 가능  
- Google은 커뮤니티 피드백을 기반으로 MCP 기능을 확장할 계획  
  
---  
  
### 개요  
  
- Google은 새로운 **Chrome DevTools 모델 컨텍스트 프로토콜(MCP) 서버**의 공개 프리뷰 버전을 출시함  
- 이로 인해 AI 코딩 어시스턴트가 **Chrome DevTools**의 디버깅 및 성능 측정 기능을 브라우저에서 직접 사용할 수 있는 환경 제공이 가능해짐  
- 즉, 코딩 에이전트가 브라우저에서 실행되는 코드의 실제 동작을 확인할 수 없어 발생하는 어려움 해결에 기여 가능  
  
### 모델 컨텍스트 프로토콜(MCP) 소개  
  
- **모델 컨텍스트 프로토콜(MCP)** 은 대형 언어 모델(LLM)을 **외부 도구** 및 데이터 소스와 연결하기 위한 오픈소스 표준임  
- Chrome DevTools MCP 서버는 이 **표준**을 활용하여 AI 에이전트와 연동, 웹 디버깅 및 성능 트레이싱 등 다양한 도구 사용 지원이 가능해짐  
- 예를 들어, `performance_start_trace` 도구로 LLM이 브라우저를 실행하고, 성능 정보를 수집 및 분석하여 개선사항 제안 가능함  
- MCP 프로토콜을 통해 코딩 에이전트가 웹사이트 개발 및 문제 해결에 더 강력한 지원을 얻게 됨  
- MCP 자세한 작동 방식은 공식 [MCP 문서](https://modelcontextprotocol.io/docs/getting-started/intro)에서 확인 가능임  
  
### 주요 활용 사례  
  
- 실시간 코드 변경사항 검증  
  - AI 에이전트가 코드를 수정한 뒤, Chrome DevTools MCP로 **브라우저에서 동작**을 즉각적으로 확인 가능함  
  - 프롬프트 예시:  
    ```  
    Verify in the browser that your change works as expected.  
    ```  
  
- 네트워크 및 콘솔 오류 진단  
  - 네트워크 요청 분석, CORS 문제 감지, 콘솔 로그 점검 등 **자동 진단** 지원  
  - 프롬프트 예시:  
    ```  
    A few images on localhost:8080 are not loading. What's happening?  
    ```  
  
- 사용자 행동 시뮬레이션  
  - 브라우저 내 탐색, 양식 작성, 버튼 클릭 등의 실사용 흐름 **자동 테스트** 및 버그 재현 도움  
  - 프롬프트 예시:  
    ```  
    Why does submitting the form fail after entering an email address?  
    ```  
  
- 실시간 스타일 및 레이아웃 문제 디버깅  
  - **DOM, CSS 검사**와 오버플로 등의 레이아웃 문제에 대한 상세 제안 자동 제공  
  - 프롬프트 예시:  
    ```  
    The page on localhost:8080 looks strange and off. Check what's happening there.  
    ```  
  
- 성능 감사 자동화  
  - 브라우저 **성능 추적 자동화** 및 분석  
  - 프롬프트 예시:  
    ```  
    Localhost:8080 is loading slowly. Make it load faster.  
    ```  
  
- 사용 가능한 MCP 도구 목록은 공식 [도구 참조 문서](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)에서 확인 가능함  
  
### 시작 방법  
  
- MCP 클라이언트에 다음과 같은 구성을 추가하여 **Chrome DevTools MCP 서버** 연동이 가능함  
  ```  
  {  
    "mcpServers": {  
      "chrome-devtools": {  
        "command": "npx",  
        "args": ["chrome-devtools-mcp@latest"]  
      }  
    }  
  }  
  ```  
  
- 예시 프롬프트로 동작 여부 확인 가능  
  ```  
  Please check the LCP of web.dev.  
  ```  
  
- 자세한 정보와 문서는 GitHub의 [Chrome DevTools MCP 문서](https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp)에 제공됨  
  
### 참여 및 확장 계획  
  
- Google은 이 공개 미리보기 출시를 시작으로 **Chrome DevTools MCP**를 점진적으로 발전시킬 예정임  
- 커뮤니티 의견 수렴을 통해 향후 추가 기능을 결정할 계획임  
- AI 코딩 지원 도구 이용자 및 차세대 AI 개발도구 공급자 모두의 의견과 참여를 적극적으로 환영함  
- 개선 요청이나 발견된 문제는 [GitHub 이슈](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/new/choose)를 통해 제보 가능

## Comments



### Comment 44576

- Author: shakespeares
- Created: 2025-10-05T17:10:55+09:00
- Points: 1

활용 사례가 playwright보다 더 좋은 부분이 있는가 싶습니다.  
단적으로 봤을 때는 아쉬운 것 같은데요.