Repolode
제출하기
AgentDeskAI

AgentDeskAI/browser-tools-mcp

로그인된 Chrome 세션의 콘솔 로그, 네트워크 트래픽, 스크린샷과 Lighthouse 감사 결과에 AI 코딩 에이전트가 접근할 수 있게 해 주는 MCP 서버와 Chrome 확장 프로그램입니다.

GitHub에서 보기웹사이트
스타
7,332
포크
536
열린 이슈
2
마지막 커밋
8일 전

어떤 프로젝트인가요?

BrowserTools MCP를 사용하면 AI 코딩 에이전트가 실제로 작업 중인 페이지를 살펴볼 수 있습니다. DevTools 확장 프로그램을 통해 기존 Chrome 세션에 연결하므로 로그인 상태를 유지할 수 있으며, 콘솔 출력, 네트워크 활동, 스크린샷과 Lighthouse 감사 결과를 Cursor, Claude Code, Windsurf, Cline, Zed, Gemini CLI 같은 MCP 호환 클라이언트로 스트리밍합니다.

이 프로젝트는 자동화 테스트 작성보다 실제 서비스 디버깅에 초점을 둡니다. Chrome DevTools MCP나 Playwright MCP처럼 자동화에 초점을 둔 서버는 새 브라우저 프로필을 사용하므로 디버깅 전에 로그인 상태를 다시 만들어야 합니다. 반면 BrowserTools는 이미 열려 있는 세션을 그대로 읽습니다. MCP 서버 명령 하나를 실행하고 번들로 제공되는 확장 프로그램을 압축해제된 Chrome 확장 프로그램으로 불러오면 설정이 끝나며, 서버가 커넥터도 직접 실행합니다.

서버는 루프백 인터페이스에만 바인딩되며, HTTP API를 사용하려면 실행별 토큰이 필요합니다. 또한 캡처한 데이터가 브라우저 밖으로 나가기 전에 Authorization 및 Cookie 헤더와 일반적인 토큰 형식 등의 인증 정보를 제거합니다. DevTools가 열린 탭 여러 개를 각각 추적하며, 큰 페이로드는 MCP 리소스로 제공해 요청이 있을 때만 에이전트 컨텍스트에 포함합니다.

핵심 기능

  • 01현재 Chrome 탭의 콘솔 로그, 오류와 네트워크 요청을 스트리밍합니다.
  • 02스크린샷을 캡처해 에이전트에 이미지로 전달합니다.
  • 03Lighthouse 접근성, 성능, SEO 및 모범 사례 감사를 실행합니다.
  • 04캡처한 헤더와 문자열에서 인증 정보를 제거한 뒤 브라우저 밖으로 내보냅니다.
  • 05여러 탭을 개별적으로 추적하고 특정 탭 ID를 지정해 도구를 사용할 수 있습니다.
  • 06응답 크기를 줄이도록 로그 결과 필터링과 페이지 나누기를 지원합니다.

활용 사례

  • 로그인한 페이지에서 발생한 콘솔 오류를 에이전트에게 진단해 달라고 요청합니다.
  • 웹 앱을 로컬에서 개발하면서 실패하거나 느린 API 요청을 디버깅합니다.
  • 별도의 테스트 프로필을 설정하지 않고 페이지에서 Lighthouse 감사를 실행합니다.
  • 실제 페이지의 스크린샷을 확인하게 해 에이전트가 UI 변경 사항을 시각적으로 점검하도록 합니다.

빠른 시작

  1. 1

    MCP 클라이언트 설정에 MCP 서버를 추가합니다

    npx -y @agentdeskai/browser-tools-mcp@latest
  2. 2

    저장소를 다운로드하거나 클론합니다

  3. 3

    chrome://extensions에서 개발자 모드를 사용 설정하고 chrome-extension 디렉터리를 압축해제된 확장 프로그램으로 로드합니다

  4. 4

    검사하려는 페이지에서 Chrome DevTools(F12)를 엽니다

사용 전 알아둘 점

  • Node 22.19 이상이 필요합니다.
  • Firefox는 검증되지 않았으며 지원되지 않는 것으로 간주됩니다.
  • 네트워크 캡처에는 DevTools를 연 이후에 발생한 요청만 기록됩니다.

포함된 컬렉션

Claude Code 도구·스킬·플러그인AI 코딩 어시스턴트와 에이전트MCP 서버Chrome 및 브라우저 확장 프로그램

토픽

#mcp#browser-debugging#chrome-extension#lighthouse#developer-tools#ai-coding#console-logs#network-debugging#ai#anthropic

자주 묻는 질문

browser-tools-mcp은(는) 무엇인가요?
로그인된 Chrome 세션의 콘솔 로그, 네트워크 트래픽, 스크린샷과 Lighthouse 감사 결과에 AI 코딩 에이전트가 접근할 수 있게 해 주는 MCP 서버와 Chrome 확장 프로그램입니다. BrowserTools MCP를 사용하면 AI 코딩 에이전트가 실제로 작업 중인 페이지를 살펴볼 수 있습니다. DevTools 확장 프로그램을 통해 기존 Chrome 세션에 연결하므로 로그인 상태를 유지할 수 있으며, 콘솔 출력, 네트워크 활동, 스크린샷과 Lighthouse 감사 결과를 Cursor, Claude Code, Windsurf, Cline, Zed, Gemini CLI 같은 MCP 호환 클라이언트로 스트리밍합니다.
browser-tools-mcp은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
browser-tools-mcp은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
browser-tools-mcp은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. browser-tools-mcp의 마지막 커밋은 2026년 10월 16일입니다.
browser-tools-mcp은(는) 어디에 사용할 수 있나요?
로그인한 페이지에서 발생한 콘솔 오류를 에이전트에게 진단해 달라고 요청합니다. 웹 앱을 로컬에서 개발하면서 실패하거나 느린 API 요청을 디버깅합니다. 별도의 테스트 프로필을 설정하지 않고 페이지에서 Lighthouse 감사를 실행합니다. 실제 페이지의 스크린샷을 확인하게 해 에이전트가 UI 변경 사항을 시각적으로 점검하도록 합니다.
browser-tools-mcp는 어떻게 설치하나요?
MCP 클라이언트 설정에 MCP 서버를 추가합니다: npx -y @agentdeskai/browser-tools-mcp@latest 저장소를 다운로드하거나 클론합니다 chrome://extensions에서 개발자 모드를 사용 설정하고 chrome-extension 디렉터리를 압축해제된 확장 프로그램으로 로드합니다 검사하려는 페이지에서 Chrome DevTools(F12)를 엽니다
browser-tools-mcp은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/AgentDeskAI/browser-tools-mcp

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트