DevTools MCP 서버 또는 전문 CLI 및 스킬을 통해 코딩 에이전트에 DevTools의 기능을 제공합니다.

GitHub에서 자세히 알아보기
Chrome DevTools는 MCP 서버를 지원하는 모든 에이전트(Gemini CLI, Antigravity, Claude Code, Codex 등)와 호환됩니다. MCP 서버를 사용하여 세션마다 DevTools의 기능을 에이전트에게 알립니다.
MCP 서버의 토큰 효율성이 더 높은 대안으로 Chrome DevTools CLI를 사용할 수 있습니다. Chrome DevTools MCP 서버 패키지에는 MCP 서버와 동일한 강력한 도구를 사용하여 스크립트를 작성하는 방법을 코딩 에이전트에게 알려주는 전문 기술이 포함되어 있습니다.

지금 설치

MCP 서버와 CLI는 모두 동일한 패키지에 포함되어 있습니다. 원하는 코딩 에이전트에 맞게 가져옵니다. 가장 인기 있는 에이전트에 대한 안내는 아래에서, 20개가 넘는 에이전트에 대한 안내는 GitHub에서 확인하세요.

  # Either MCP only:
  gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
  # Or as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

DevTools MCP 서버 또는 CLI를 설치한 후 몇 가지 프롬프트를 시도하여 시작해 보세요. 상담사에게 Lighthouse 감사 요청, 양식 작성, 스크린샷 요청을 할 수 있습니다. 이러한 기능을 실제로 확인하려면 다음 프롬프트를 사용해 보세요.

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

이 프롬프트는 도구를 사용하여 새 페이지를 만들고, 검색창과 상호작용하며, CrUX 데이터를 포함한 성능 트레이스를 실행합니다.


사용 가능한 모든 도구 보기