BrowserTools MCP: 브라우저 활동의 실시간 모니터링을 위한 MCP 서비스

11.9K 00

일반 소개

브라우저 도구 MCP 는 에이전트데스크AI 팀이 개발한 오픈 소스 프로젝트입니다. 이 프로젝트는 Chrome 확장 프로그램과 Node.js 서비스를 사용하여 로그, 네트워크 요청 및 스크린샷을 포함한 브라우저 활동을 실시간으로 모니터링하고 웹 성능, SEO 및 접근성을 분석할 수 있도록 AI를 지원합니다. 이 프로젝트는 다음을 기반으로 합니다. 인류학 MCP 프로토콜, 다음과 함께 사용하기에 적합 커서 최신 버전인 1.2.0은 2025년 2월에 출시되었으며 GitHub에서 2400개 이상의 별을 받았습니다. 최신 버전인 1.2.0은 2025년 2월에 출시되었으며 GitHub에서 2400개 이상의 별을 받았습니다. 특히 웹 페이지를 디버깅하거나 웹사이트를 최적화하는 개발자에게 간단하고 실용적이며 모든 데이터는 타사 서비스 없이 로컬에 저장됩니다.

기능 목록

브라우저 콘솔 로그를 실시간으로 캡처하여 코드 문제를 찾아내세요.
네트워크 요청을 모니터링하여 요청 상태 및 오류를 확인합니다.
현재 웹 화면을 캡처하여 저장하거나 편집기에 붙여넣습니다.
웹 페이지 DOM 요소를 분석하여 특정 데이터를 추출합니다.
성능 감사를 수행하여 느린 로딩의 원인을 파악하세요.
SEO 최적화를 확인하고 개선을 위한 제안을 제공합니다.
접근성 감사를 실행하고 WCAG를 준수합니다.
프레임워크 문제를 최적화하기 위한 NextJS 프로젝트 감사를 지원합니다.
모든 디버깅 도구를 순차적으로 실행할 수 있는 디버그 모드를 제공합니다.
모든 감사 도구를 순차적으로 실행하는 감사 모드를 제공합니다.

도움말 사용

브라우저툴즈 MCP를 실행하려면 Chrome 확장 프로그램, 노드 서버, MCP 서버의 세 가지 구성요소가 필요합니다. 자세한 설치 및 사용 가이드를 통해 빠르게 시작할 수 있습니다.

설치 프로세스

Chrome 확장 프로그램 설치
- https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip 에서 확장 프로그램을 다운로드하세요.
- ZIP 파일을 로컬 폴더에 압축을 풉니다.
- Chrome을 열고 다음으로 이동합니다. chrome://extensions/.
- "개발자 모드"를 켜고 "확장 프로그램 로드"를 클릭합니다.
- 압축을 푼 폴더를 선택하고 확장자가 목록에 나타나는지 확인합니다.
노드 서버 실행
- 컴퓨터에 Node.js가 설치되어 있는지 확인합니다(18세 이상 권장).
- 터미널을 열고 실행합니다:
```
npx @agentdeskai/browser-tools-server@latest
```
- "포트 3025에서 실행 중인 서버"가 표시되면 시작에 성공했음을 의미합니다.
- 포트 충돌이 발생하면 점유 중인 프로세스를 닫고 다시 시도하세요.
MCP 서버 구성(커서를 예로 들어)
- 커서를 열고 설정 > MCP로 이동합니다.
- 새 글로벌 MCP 서비스 추가를 클릭합니다.
- 컴파일러 ~/.cursor/mcp.json추가:
```
{
"mcpServers": {
"browser-tools-mcp": {
"command": "npx",
"args": ["@agentdeskai/browser-tools-mcp@latest"]
}
}
}
```
- 설정을 저장하고 새로 고침하면 녹색 점이 연결에 성공했음을 나타냅니다.

주요 기능의 작동

콘솔 로그 모니터링
- 대상 웹 페이지를 열고 F12를 눌러 개발자 도구에 액세스합니다.
- "BrowserToolsMCP" 패널에서 "연결"을 클릭합니다.
- 로그는 실시간으로 표시되며 '로그 저장'을 클릭하여 로컬에 저장할 수 있습니다.
웹 요청 캡처
- 네트워크 탭에서 요청 세부 정보를 확인합니다.
- 커서 입력에서 mcp_getNetworkLogs 모든 요청을 받거나 mcp_getNetworkErrors 오류 요청 보기.
화면 캡처
- 확장 패널에서 저장 경로 설정(기본값) /mcp-screenshots).
- '스크린샷 찍기'를 클릭하여 스크린샷을 저장합니다.
- '커서에 자동 붙여넣기 허용'을 활성화하면 커서 입력 상자에 초점을 맞춘 상태에서 스크린샷이 자동으로 붙여넣어집니다.
감사 도구 실행
- 확장 프로그램이 활성화되어 있고 활성 페이지가 있는지 확인합니다.
- 커서에 다음 명령을 입력합니다:
  - runAccessibilityAudit접근성(WCAG)을 확인합니다.
  - runPerformanceAudit: 성능 병목 현상을 분석합니다.
  - runSEOAudit: SEO 최적화.
  - runBestPracticesAudit모범 사례를 확인하세요.
  - runNextJSAuditNextJS 프로젝트 감사.
  - runAuditMode모든 감사를 순차적으로 실행합니다.
  - runDebuggerMode모든 디버깅 도구를 순서대로 실행합니다.
- 결과는 점수 및 문제 세부 정보와 함께 JSON 형식으로 반환됩니다.
커미셔닝 모드와 감사 모드 비교
- 가져오기 runDebuggerMode를 클릭하고 디버깅 도구를 순서대로 실행하여 문제를 찾는 데 도움을 받습니다.
- 가져오기 runAuditMode이러한 방식으로 감사 도구가 순차적으로 실행되어 모든 최적화 지점을 감지합니다.
- NextJS 프로젝트는 자동으로 관련 감사를 인식하고 추가적으로 실행합니다.

주의

개발자 도구 창을 여러 개 열면 데이터가 혼동될 수 있으므로 하나의 창만 열어야 합니다.
서비스를 다시 시작하거나 페이지를 새로 고치면 로그가 지워지므로 미리 저장해 두는 것이 좋습니다.
문제가 발생하면 @tedx_ai(Platform X)로 문의하거나 https://browsertools.agentdesk.ai/ 에서 설명서를 참조하세요.

이 단계를 통해 브라우저툴즈 MCP의 기능을 최대한 활용하여 웹 개발 효율성을 향상시킬 수 있습니다.

애플리케이션 시나리오

웹 디버깅
개발자는 이를 사용하여 로그와 네트워크를 모니터링하여 코드 오류를 빠르게 찾을 수 있습니다.
웹사이트 최적화
성능과 SEO를 분석하는 감사 도구로 사용자 경험을 개선하세요.
AI 개발 지원
AI 개발자는 커서를 통합하여 실시간 데이터를 사용하여 스마트 애플리케이션을 최적화할 수 있습니다.

QA

로그가 표시되지 않는 이유는 무엇인가요?
확장 프로그램과 서버가 연결되어 있는지 확인하고 개발자 도구 창이 두 번 이상 열리지 않았는지 확인합니다.
감사 결과는 어디에서 볼 수 있나요?
커서와 같은 MCP 클라이언트에서 명령을 실행하면 결과가 JSON 형식으로 반환됩니다.
다른 브라우저도 지원되나요?
현재는 Chrome만 지원되며 향후 확장될 가능성이 있습니다.