chrome-devtools-mcp
CLI 도구ChromeDevTools/chrome-devtools-mcp
让 AI 编码代理控制 Chrome DevTools 的 MCP 服务器。
개요
Chrome DevTools MCP 服务器，让 AI 代理调试、自动化并分析 Chrome 浏览器性能。与 Puppeteer 和 DevTools 前端集成，实现可靠自动化和性能洞察。
README 미리보기
# Chrome DevTools for Agents\n\n[](https://npmjs.org/package/chrome-devtools-mcp)\n\nChrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot)\ncontrol and inspect a live Chrome browser. It acts as a Model-Context-Protocol\n(MCP) server, giving your AI coding assistant access to the full power of\nChrome DevTools for reliable automation, in-depth debugging, and performance analysis.\nA [CLI](docs/cli.md) is also provided for use without MCP.\n\n## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)\n\n## Key features\n\n- **Get performance insights**: Uses [Chrome\n DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record\n traces and extract actionable performance insights.\n- **Advanced browser debugging**: Analyze network requests, take screenshots and\n check browser console messages (with source-mapped stack traces).\n- **Reliable automation**. Uses\n [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in\n Chrome and automatically wait for action results.\n\n## Disclaimers\n\n`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients\nallowing them to inspect, debug, and modify any data in the browser or DevTools.\nAvoid sharing sensitive or personal information that you don't want to share with\nMCP clients.\n\n`chrome-devtools-mcp` officially supports Google Chrome and [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) only.\nOther Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion.\nWe are committed to providing fixes and support for the latest version of [Extended Stable Chrome](https://chromiumdash.appspot.com/schedule).\n\nPerformance tools may send trace URLs to the Google CrU
FAQ (2)
문제 해결chrome-devtools-mcp에서 emulate()을 사용하여 mobile viewport와 network throttle을 동시에 설정할 때 'Navigation timeout' 오류를 수정하는 방법은?
이는 chrome-devtools-mcp v1.0.1의 알려진 문제입니다. 네트워크 스로틀이 탐색 타임아웃 곱셈기가 업데이트되기 전에 적용되어, 뷰포트 변경 시 Slow 3G와 같은 느린 네트워크 조건에서 페이지 리로드가 발생할 때 기본 10초 타임아웃이 적용됩니다. 해결 방법: emulate 호출을 두 개의 별도 호출로 분할합니다. 예를 들어, 먼저 networkConditions만으로 emulate을 호출한 다음, 두 번째 호출에서 viewport로 호출합니다(또는 그 반대). 이렇게 하면 확장된 타임아웃 없이 리로드가 발생하는 것을 피할 수 있습니다. 영구적인 수정은 PR #2134에서 제안되었습니다.
문제 해결Chrome DevTools MCP를 사용할 때 'Allow remote debugging' 권한 대화상자를 우회하는 방법은 무엇인가요?
전용 Chrome 프로필을 사용하여 원격 디버깅을 활성화하세요. Chrome을 --remote-debugging-port=9222 --user-data-dir=/path/to/profile로 실행합니다. 그런 다음 MCP 서버를 http://127.0.0.1:9222에 연결합니다. 이렇게 하면 전용 프로필이 디버깅을 위해 사전 승인되어 있으므로 권한 대화상자가 표시되지 않습니다. 개발 및 테스트에 권장됩니다. 보안 문제로 인해 권한 승인을 유지하는 기능은 구현되지 않았습니다.