Skip to main content
Glama
enesjakozh

Chrome Debug MCP Server

by robertheadley
GitHub
JavaScript
42
  • Linux
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

크롬 디버그 MCP 플레이라이트

Greasemonkey API를 완벽하게 지원하는 Playwright를 사용한 브라우저 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 구현입니다.

특징

핵심 브라우저 기능

  • 브라우저 실행 및 관리

  • 생성/전환/닫기 기능을 갖춘 다중 탭 지원

  • 페이지 탐색 및 상호 작용

  • 스크린샷 캡처

Greasemonkey API 지원

  • CSS 주입을 위한 GM_addStyle

  • 데이터 저장을 위한 GM_getValue/GM_setValue

  • 저장소 정리를 위한 GM_deleteValue

  • 데스크톱 알림을 위한 GM_notification

  • 클립보드 작업을 위한 GM_setClipboard

  • 교차 출처 요청을 위한 GM_xmlhttpRequest

자원 관리

  • 네트워크 요청 차단

  • 요청 차단, 수정 및 로깅

  • 리소스 유형 필터링

디버그 기능

  • 세부 로깅 시스템

  • 로그 파일 구성

  • 깨끗한 인터페이스 출력

설치

지엑스피1

빠른 시작

// Launch browser tool browser launch_browser --url "https://example.com" --browserType "chromium" // Use GM functions tool browser gm_setValue --key "setting" --value "test" tool browser gm_getValue --key "setting" // Intercept requests tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

선적 서류 비치

  • 명령어 - 예제를 포함한 자세한 명령어 설명서

  • COMMANDS.md에서 사용 예제가 포함된 전체 명령 목록을 볼 수 있습니다.

핵심 기능

브라우저 관리

// Launch browser tool browser launch_browser --url "https://example.com" // Create new tab tool browser create_tab --url "https://example.com" // Switch between tabs tool browser switch_tab --index 1

그리스몽키 API

// Add custom styles tool browser gm_addStyle --css "body { background: #f0f0f0; }" // Store data tool browser gm_setValue --key "setting" --value "test" // Make cross-origin requests tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

리소스 차단

// Block image loading tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block" // Log all CSS requests tool browser intercept_requests --patterns ["*.css"] --action "log"

구현 세부 사항

로깅 시스템

  • 모든 디버그 출력이 로그 파일로 리디렉션됨

  • 타임스탬프가 찍힌 항목

  • 로그 디렉토리에 정리됨

  • 깨끗한 인터페이스 출력

오류 처리

  • 자세한 오류 로깅

  • 오류에 대한 적절한 정리

  • 자원 관리

종속성

  • 극작가: 브라우저 자동화

  • @modelcontextprotocol/sdk: MCP 구현

개발

필수 조건

  • Node.js 16 이상

  • npm 7 이상

설정

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git cd chrome-debug-mcp-playwright npm install

특허

MIT 라이센스 - 자세한 내용은 라이센스 파일을 참조하세요.

기여하다

여러분의 참여를 환영합니다! 자세한 내용은 참여 가이드를 참조하세요.

감사의 말

Robert Headley의 원래 chrome-debug-mcp를 기반으로 합니다.

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

Chrome 디버그 MCP 서버

디버깅 기능, 사용자 스크립트 주입, 확장 기능 지원을 갖춘 Chrome을 제어하기 위한 MCP(모델 컨텍스트 프로토콜) 서버입니다.

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

특징

크롬 컨트롤

  • 사용자 정의 구성으로 Chrome 실행

  • 사용자 정의 Chrome 실행 파일 경로 지원

  • 사용자 프로필 관리(기본 또는 사용자 정의 사용자 데이터 디렉토리)

  • 확장 지원 및 관리

  • Chrome의 "자동 제어" 배너 비활성화

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

페이지 자동화

  • 페이지 요소를 클릭하고 입력하고 상호 작용하세요

  • 드롭다운 및 양식 입력 처리

  • 마우스를 올려놓고 요소를 기다리세요

  • 전체 페이지 또는 요소의 스크린샷을 찍으세요

  • 페이지 간 탐색

  • 뷰포트 크기 및 장치 에뮬레이션 설정

  • 요소에서 텍스트와 속성 추출

탭 관리

  • 열려 있��� 모든 탭을 ID와 URL과 함께 나열합니다.

  • 지정된 URL로 새 탭 열기

  • ID로 탭 닫기

  • 탭 간 전환

  • 여러 탭 상태를 추적하고 관리합니다.

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

디버깅 기능

  • Chrome DevTools 프로토콜(CDP)을 통한 원격 디버깅

  • 콘솔 로그 캡처 및 모니터링

  • 페이지 컨텍스트에서의 JavaScript 평가

  • 실시간 콘솔 출력 스트리밍

사용자 스크립트 지원

  • 웹 페이지에 사용자 스크립트 삽입

  • Greasemonkey 스타일 API 지원:

    • 영구 저장소를 위한 GM_setValue / GM_getValue

    • CSS 주입을 위한 GM_addStyle

    • 교차 출처 요청을 위한 GM_xmlhttpRequest

    • 새 탭 생성을 위한 GM_openInTab

    • 메뉴 명령에 대한 GM_registerMenuCommand

확장 통합

  • 압축 해제된 확장 프로그램 로드

  • 확장 상태 및 구성 유지

  • 기본 Chrome 프로필 확장 프로그램 지원

  • 선택적 확장 활성화/비활성화

설치

필수 조건

Roo 코드 확장 프로그램 설치

  1. Visual Studio Code 열기

  2. 확장 프로그램으로 이동(Ctrl+Shift+X)

  3. "Roo Code"를 검색하세요

  4. 설치를 클릭하세요

Chrome 디버그 MCP 서버 설정

  1. 이 저장소를 복제하세요:

    git clone https://github.com/yourusername/chrome-debug-mcp.git cd chrome-debug-mcp

  2. 종속성 설치:

    npm install

  3. 프로젝트를 빌드하세요:

    npm run build

  4. Roo 코드에서 구성: cline_mcp_settings.json 에 추가:

    { "mcpServers": { "chrome-debug": { "command": "node", "args": ["path/to/chrome-debug-mcp/build/index.js"], "disabled": false, "alwaysAllow": [] } } }

용법

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가) ======= 사용 가능한 모든 명령, 도구 및 기능에 대한 전체 참조는 COMMANDS.md를 참조하세요.

64acbb3의 부모(업로드를 통해 파일 추가)

기본 크롬 실행

use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", url: "https://example.com" } })

사용자 정의 프로필로 시작

use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", userDataDir: "path/to/chrome/profile", disableAutomationControlled: true } })

사용자 스크립트 삽입

use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { url: "https://example.com", userscriptPath: "path/to/userscript.js" } })

JavaScript 평가

use_mcp_tool({ server_name: "chrome-debug", tool_name: "evaluate", arguments: { expression: "document.title" } })

콘솔 로그 가져오기

use_mcp_tool({ server_name: "chrome-debug", tool_name: "get_console_logs", arguments: { clear: true } })

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

=======

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

페이지 상호작용 예시

요소를 클릭하세요

use_mcp_tool({ server_name: "chrome-debug", tool_name: "click", arguments: { selector: "#submit-button", delay: 500 } })

입력란에 입력

use_mcp_tool({ server_name: "chrome-debug", tool_name: "type", arguments: { selector: "#search-input", text: "search query", delay: 100 } })

드롭다운에서 선택

use_mcp_tool({ server_name: "chrome-debug", tool_name: "select", arguments: { selector: "#country-select", value: "US" } })

요소를 기다리세요

use_mcp_tool({ server_name: "chrome-debug", tool_name: "wait_for_selector", arguments: { selector: ".loading-complete", visible: true, timeout: 5000 } })

스크린샷 찍기

use_mcp_tool({ server_name: "chrome-debug", tool_name: "screenshot", arguments: { path: "screenshot.png", fullPage: true } })

뷰포트 크기 설정

use_mcp_tool({ server_name: "chrome-debug", tool_name: "set_viewport", arguments: { width: 1920, height: 1080, deviceScaleFactor: 1 } })

탭 관리 예제

모든 탭 나열

use_mcp_tool({ server_name: "chrome-debug", tool_name: "list_tabs", arguments: {} })

새 탭 열기

use_mcp_tool({ server_name: "chrome-debug", tool_name: "new_tab", arguments: { url: "https://example.com" } })

탭으로 전환

use_mcp_tool({ server_name: "chrome-debug", tool_name: "switch_tab", arguments: { tabId: "tab-id-from-list-tabs" } })

탭 닫기

use_mcp_tool({ server_name: "chrome-debug", tool_name: "close_tab", arguments: { tabId: "tab-id-from-list-tabs" } })

<<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리

64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가) ======= 64acbb3의 부모(업로드를 통해 파일 추가)

종속성

이 프로젝트는 다음과 같은 오픈 소스 패키지를 사용합니다.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

기여하다

기부에 대한 자세한 내용은 기부 가이드를 참조하세요.

감사의 말

8a57443의 부모(robertheadley/feature/puppeteer-commands에서 풀 리퀘스트 #4 병합) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가) =======

64acbb3의 부모(업로드를 통해 파일 추가)

Deploy Server
A
security – no known vulnerabilities
-
license - not tested
A
quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

디버깅 기능을 통해 Chrome 브라우저를 제어하여 페이지 자동화, 확장 관리, 모델 컨텍스트 프로토콜을 통한 사용자 스크립트 주입을 허용합니다.

  1. 특징
    1. 핵심 브라우저 기능
    2. Greasemonkey API 지원
    3. 자원 관리
    4. 디버그 기능
  2. 설치
    1. 빠른 시작
      1. 선적 서류 비치
        1. 핵심 기능
          1. 브라우저 관리
          2. 그리스몽키 API
          3. 리소스 차단
        2. 구현 세부 사항
          1. 로깅 시스템
          2. 오류 처리
        3. 종속성
          1. 개발
            1. 필수 조건
            2. 설정
          2. 특허
            1. 기여하다
              1. 감사의 말
                1. Robert Headley의 원래 chrome-debug-mcp를 기반으로 합니다.
                  1. Chrome 디버그 MCP 서버
                    1. <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리
                      1. 특징
                    2. <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리
                      1. 페이지 자동화
                      2. 탭 관리
                      3. 디버깅 기능
                      4. 사용자 스크립트 지원
                      5. 확장 통합
                      6. 설치
                      7. 용법
                    3. <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리
                      1. 기본 크롬 실행
                      2. 사용자 정의 프로필로 시작
                      3. 사용자 스크립트 삽입
                      4. JavaScript 평가
                      5. 콘솔 로그 가져오기
                    4. <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리 <<<<<<< 머리
                      1. 페이지 상호작용 예시
                      2. 탭 관리 예제
                      3. 종속성
                      4. 특허
                      5. 기여하다
                      6. 감사의 말

                    Related Resources

                    Related MCP Servers

                    • Chrome Tools MCP Server

                      nicholmikey
                      A
                      security
                      -
                      license
                      A
                      quality
                      An MCP server that provides tools for interacting with Chrome through its DevTools Protocol, enabling remote control of Chrome tabs to execute JavaScript, capture screenshots, monitor network traffic, and more.
                      Last updated -
                      194
                      48
                      MIT License
                      • Linux
                      • Apple

                    • BrowserTools MCP

                      oenius
                      A
                      security
                      -
                      license
                      A
                      quality
                      A browser monitoring and interaction tool that enables AI applications to capture and analyze browser data through a Chrome extension, supporting functions like console monitoring, screenshots, DOM analysis, and website auditing.
                      Last updated -
                      14
                      68
                      2
                      MIT License

                    • Chrome MCP Server

                      lxe
                      -
                      security
                      -
                      license
                      -
                      quality
                      A Model Context Protocol server that enables AI assistants to control Chrome browsers through the Chrome DevTools Protocol, allowing for navigation, clicking, typing, and extracting page information.
                      Last updated -
                      42
                      • Apple
                      • Linux

                    • Chrome Debug MCP Server

                      Rainmen-xia
                      A
                      security
                      -
                      license
                      A
                      quality
                      A Model Context Protocol server that connects to Chrome debugging ports, enabling browser automation with persistent login sessions.
                      Last updated -
                      10
                      29
                      8
                      MIT License
                      • Apple
                      • Linux

                    View all related MCP servers

                    Appeared in Searches

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/robertheadley/chrome-debug-mcp'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server