Opera DevTools MCP

이것은 chrome-devtools-mcp의 포크이며 (Copyright 2025 Google LLC), Opera Neon AI 기능이 추가되었습니다.

opera-devtools-mcp는 코딩 에이전트(예: Claude, Cursor, Copilot)가 실행 중인 브라우저를 제어하고 검사할 수 있게 해줍니다. 이는 Model-Context-Protocol(MCP) 서버로 작동하여, AI 코딩 어시스턴트가 DevTools의 모든 기능을 사용해 안정적인 자동화, 심층 디버깅, 성능 분석을 할 수 있게 합니다. Opera Neon에 연결하면 Opera의 내장 AI 기능도 사용할 수 있습니다.

도구 참조 | 변경 로그 | 기여하기 | 문제 해결 | 설계 원칙

Related MCP server: Chrome DevTools MCP

주요 기능

• Opera Neon AI 도구: 코딩 에이전트에서 Opera의 내장 AI와 직접 상호작용하세요 — 채팅, 페이지 작업 수행, 콘텐츠 생성, 리서치 실행.

• 성능 인사이트 얻기: Chrome DevTools를 사용해 트레이스를 기록하고 실행 가능한 성능 인사이트를 추출합니다.

• 고급 브라우저 디버깅: 네트워크 요청을 분석하고, 스크린샷을 캡처하며, 브라우저 콘솔 메시지를 확인합니다(소스 맵 기반 스택 트레이스 포함).

• 안정적인 자동화: puppeteer를 사용해 브라우저에서 작업을 자동화하고 작업 결과를 자동으로 기다립니다.

Opera Neon AI 도구

이 도구들은 --browser-url을 통해 Opera Neon에 연결된 경우에만 사용할 수 있습니다.

면책 조항

opera-devtools-mcp는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여 브라우저 또는 DevTools의 데이터를 검사, 디버깅, 수정할 수 있게 합니다. MCP 클라이언트와 공유하고 싶지 않은 민감하거나 개인적인 정보는 공유하지 마세요.

성능 도구는 실제 사용자 경험 데이터를 가져오기 위해 트레이스 URL을 Google CrUX API로 보낼 수 있습니다. 이를 비활성화하려면 --no-performance-crux 플래그를 사용하여 실행하세요.

요구 사항

• Node.js v20.19 또는 더 새로운 최신 유지 관리 LTS 버전.

• Chromium 기반 브라우저(Chrome 또는 Opera Neon).

• npm

시작하기

다음 구성을 MCP 클라이언트에 추가하세요:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": ["-y", "opera-devtools-mcp@latest"]
    }
  }
}

[!NOTE] opera-devtools-mcp@latest를 사용하면 MCP 클라이언트가 항상 최신 버전의 Opera DevTools MCP 서버를 사용하게 됩니다.

Opera Neon에 연결

Opera Neon AI 도구를 사용하려면 원격 디버깅을 활성화한 상태로 Opera Neon을 시작하고 --browser-url을 통해 연결하세요:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

원격 디버깅 포트로 Opera Neon을 시작하세요:

# macOS
/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

MCP 클라이언트 구성

claude mcp add opera-devtools --scope user npx opera-devtools-mcp@latest

Cursor Settings -> MCP -> New MCP Server로 이동하세요. 위에서 제공된 구성을 사용하세요.

위의 표준 구성을 사용하여 VS Code MCP 구성 가이드를 따르거나 CLI를 사용하세요:

code --add-mcp '{"name":"opera-devtools","command":"npx","args":["-y","opera-devtools-mcp"],"env":{}}'

첫 번째 프롬프트

MCP 클라이언트에서 모든 것이 작동하는지 확인하려면 다음 프롬프트를 입력하세요:

Check the performance of https://opera.com

MCP 클라이언트는 브라우저를 열고 성능 트레이스를 기록할 것입니다.

[!NOTE] MCP 서버는 MCP 클라이언트가 실행 중인 브라우저 인스턴스가 필요한 도구를 사용할 때 자동으로 브라우저를 시작합니다. Opera DevTools MCP 서버에 단독으로 연결하는 것만으로는 브라우저가 자동으로 시작되지 않습니다.

도구

문제가 발생하면 문제 해결 가이드를 확인하세요.

• 입력 자동화 (10개 도구)

  • click

  • drag

  • fill

  • fill_form

  • handle_dialog

  • hover

  • press_key

  • type_text

  • upload_file

  • click_at

• 탐색 자동화 (6개 도구)

  • close_page

  • list_pages

  • navigate_page

  • new_page

  • select_page

  • wait_for

• 에뮬레이션 (2개 도구)

  • emulate

  • resize_page

• 성능 (3개 도구)

  • performance_analyze_insight

  • performance_start_trace

  • performance_stop_trace

• 네트워크 (2개 도구)

  • get_network_request

  • list_network_requests

• 디버깅 (8개 도구)

  • evaluate_script

  • get_console_message

  • lighthouse_audit

  • list_console_messages

  • take_screenshot

  • take_snapshot

  • screencast_start

  • screencast_stop

• 메모리 (12개 도구)

  • take_heapsnapshot

  • close_heapsnapshot

  • compare_heapsnapshots

  • get_heapsnapshot_class_nodes

  • get_heapsnapshot_details

  • get_heapsnapshot_dominators

  • get_heapsnapshot_duplicate_strings

  • get_heapsnapshot_edges

  • get_heapsnapshot_object_details

  • get_heapsnapshot_retainers

  • get_heapsnapshot_retaining_paths

  • get_heapsnapshot_summary

• Opera (8개 도구)

  • opera_call_mcp_tool

  • opera_chat

  • opera_do

  • opera_list_mcp_servers

  • opera_list_mcp_tools

  • opera_list_models

  • opera_make

  • opera_research

• 확장 프로그램 (5개 도구)

  • install_extension

  • list_extensions

  • reload_extension

  • trigger_extension_action

  • uninstall_extension

• 타사 (2개 도구)

  • execute_3p_developer_tool

  • list_3p_developer_tools

• WebMCP (2개 도구)

  • execute_webmcp_tool

  • list_webmcp_tools

• 프로그레시브 웹 앱 (4개 도구)

  • get_os_app_state

  • install_pwa

  • launch_pwa

  • uninstall_pwa

구성

Opera DevTools MCP 서버는 다음 구성 옵션을 지원합니다:

• --autoConnect/ --auto-connect 지정하면 channel 매개변수로 식별되는 사용자 데이터 디렉터리에서 로컬로 실행 중인 브라우저(Chrome 144+)에 자동으로 연결합니다. 기본 채널은 stable입니다. chrome://inspect/#remote-debugging을 통해 Chrome 인스턴스에서 원격 디버깅 서버를 시작해야 합니다.

  • 유형: boolean

  • 기본값: false

• --browserUrl/ --browser-url, -u 실행 중이며 디버깅 가능한 Chrome 인스턴스에 연결합니다(예: http://127.0.0.1:9222). 자세한 내용은 https://github.com/operasoftware/opera-devtools-mcp#connecting-to-a-running-chrome-instance를 참조하세요.

  • 유형: string

  • 기본값: false

• --wsEndpoint/ --ws-endpoint, -w 실행 중인 Chrome 인스턴스에 연결하기 위한 WebSocket 엔드포인트입니다(예: ws://127.0.0.1:9222/devtools/browser/). --browserUrl의 대안입니다.

  • 유형: string

  • 기본값: false

• --wsHeaders/ --ws-headers WebSocket 연결을 위한 사용자 지정 헤더를 JSON 형식으로 지정합니다(예: '{"Authorization":"Bearer token"}'). --wsEndpoint와 함께만 작동합니다.

  • 유형: string

  • 기본값: false

• --headless 헤드리스(UI 없음) 모드로 실행할지 여부입니다.

  • 유형: boolean

  • 기본값: false

• --executablePath/ --executable-path, -e 사용자 지정 Chrome 실행 파일의 경로입니다.

  • 유형: string

  • 기본값: false

• --isolated 지정하면 브라우저가 닫힌 후 자동으로 정리되는 임시 user-data-dir이 생성됩니다. 기본값은 false입니다.

  • 유형: boolean

  • 기본값: false

• --userDataDir/ --user-data-dir Chrome의 사용자 데이터 디렉터리 경로입니다. 기본값은 $HOME/.cache/opera-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE입니다.

  • 유형: string

  • 기본값: false

• --channel 사용할 다른 Chrome 채널을 지정합니다. 기본값은 stable 채널 버전입니다.

  • 유형: string

  • 선택지: canary, dev, beta, stable

  • 기본값: false

• --logFile/ --log-file 디버그 로그를 기록할 파일 경로입니다. 환경 변수 DEBUG를 *로 설정하면 상세 로그가 활성화됩니다. 버그 리포트를 제출할 때 유용합니다.

  • 유형: string

  • 기본값: false

• --viewport 서버가 시작하는 Chrome 인스턴스의 초기 뷰포트 크기입니다. 예를 들어 1280x720입니다. 헤드리스 모드에서는 최대 크기가 3840x2160px입니다.

  • 유형: string

  • 기본값: false

• --proxyServer/ --proxy-server 브라우저를 시작할 때 --proxy-server로 전달되는 Chrome용 프록시 서버 구성입니다. 자세한 내용은 https://www.chromium.org/developers/design-documents/network-settings/를 참조하세요.

  • 유형: string

  • 기본값: false

• --acceptInsecureCerts/ --accept-insecure-certs 활성화하면 자체 서명된 인증서와 만료된 인증서 관련 오류를 무시합니다. 주의해서 사용하세요.

  • 유형: boolean

  • 기본값: false

• --experimentalPageIdRouting/ --experimental-page-id-routing 페이지 범위 도구에 pageId를 노출하고 페이지 ID별로 요청을 라우팅할지 여부입니다(동시 에이전트 세션에 유용).

  • 유형: boolean

  • 기본값: false

• --experimentalDevtools/ --experimental-devtools DevTools 타깃에 대한 자동화를 활성화할지 여부입니다.

  • 유형: boolean

  • 기본값: false

• --experimentalVision/ --experimental-vision click_at(x,y)와 같은 좌표 기반 도구를 활성화할지 여부입니다. 일반적으로 스크린샷을 보고 정확한 좌표를 생성할 수 있는 computer-use 모델이 필요합니다.

  • 유형: boolean

  • 기본값: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory 메모리 디버깅 도구를 활성화할지 여부입니다.

  • 유형: boolean

  • 기본값: false

• --experimentalStructuredContent/ --experimental-structured-content 구조화된 형식의 콘텐츠를 출력할지 여부입니다.

  • 유형: boolean

  • 기본값: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages webviews나 background pages와 같은 모든 종류의 페이지를 페이지로 포함할지 여부입니다.

  • 유형: boolean

  • 기본값: false

• --experimentalScreencast/ --experimental-screencast 실험적 screencast 도구를 노출합니다(ffmpeg 필요). ffmpeg https://www.ffmpeg.org/download.html을 설치하고 MCP 서버 PATH에서 사용할 수 있는지 확인하세요.

  • 유형: boolean

  • 기본값: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path screencast 녹화용 ffmpeg 실행 파일의 경로입니다.

  • 유형: string

  • 기본값: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp true로 설정하면 WebMCP 디버깅 도구가 활성화됩니다. 다음 플래그와 함께 Chrome 150+가 필요합니다: --enable-features=WebMCP

  • 유형: boolean

  • 기본값: false

• --chromeArg/ --chrome-arg Chrome용 추가 인수입니다. Chrome이 opera-devtools-mcp에 의해 실행될 때만 적용됩니다.

  • 유형: array

  • 기본값: false

• --blockedUrlPattern/ --blocked-url-pattern 지정된 URL 패턴을 차단하여 브라우저의 네트워크 액세스를 제한합니다(https://urlpattern.spec.whatwg.org/ 사용). 연결 시 차단된 URL이 있는 타깃에서 자동으로 분리되며 런타임 요청(탐색 및 하위 리소스 포함)을 차단합니다. 패턴 배열을 허용합니다.

  • 유형: array

  • 기본값: false

• --allowedUrlPattern/ --allowed-url-pattern 지정된 URL 패턴만 허용하여 브라우저의 네트워크 액세스를 제한합니다(https://urlpattern.spec.whatwg.org/ 사용). Chrome 149+가 필요합니다. 연결 시 허용되지 않은 URL이 있는 타깃에서 자동으로 분리되며 런타임 요청(탐색 및 하위 리소스 포함)을 차단합니다. 패턴 배열을 허용합니다.

  • 유형: array

  • 기본값: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Chrome의 기본 인수를 명시적으로 비활성화합니다. Chrome이 opera-devtools-mcp에 의해 실행될 때만 적용됩니다.

  • 유형: array

  • 기본값: false

• --categoryEmulation/ --category-emulation false로 설정하면 에뮬레이션 관련 도구가 제외됩니다.

  • 유형: boolean

  • 기본값: true

• --categoryPerformance/ --category-performance false로 설정하면 성능 관련 도구가 제외됩니다.

  • 유형: boolean

  • 기본값: true

• --categoryNetwork/ --category-network false로 설정하면 네트워크 관련 도구가 제외됩니다.

  • 유형: boolean

  • 기본값: true

• --categoryExtensions/ --category-extensions true로 설정하면 확장 프로그램 관련 도구가 포함됩니다. 참고: 이 기능은 현재 파이프 연결에서만 지원됩니다. 149가 출시될 때까지 autoConnect, browserUrl, wsEndpoint는 이 기능과 함께 지원되지 않습니다.

  • 유형: boolean

  • 기본값: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party true로 설정하면 검사 중인 페이지 자체가 노출하는 타사 개발자 도구가 활성화됩니다.

  • 유형: boolean

  • 기본값: false

• --categoryPwa/ --category-pwa true로 설정하면 프로그레시브 웹 앱 자동화 도구(설치, 실행, 제거 및 OS 상태)가 포함됩니다. 이 기능은 파이프 연결에서만 지원됩니다. autoConnect, browserUrl, wsEndpoint는 지원되지 않습니다.

  • 유형: boolean

  • 기본값: false

• --performanceCrux/ --performance-crux true로 설정하면 성능 추적의 URL을 CrUX API로 전송하여 현장 성능 데이터를 얻을 수 있습니다.

  • 유형: boolean

  • 기본값: false

• --usageStatistics/ --usage-statistics true로 설정하면 사용 통계 수집에 동의하게 됩니다. Google은 도구 개선을 위해 사용 데이터를 수집하며, 이는 Google 개인정보처리방침(https://policies.google.com/privacy)에 따라 처리됩니다. 이는 Chrome 브라우저 메트릭과는 별개입니다. OPERA_DEVTOOLS_NO_USAGE_STATISTICS 또는 CI 환경 변수가 설정된 경우 비활성화됩니다.

  • 유형: boolean

  • 기본값: false

• --screenshotFormat/ --screenshot-format 호출자가 지정하지 않을 때 take_screenshot이 사용하는 기본 출력 형식을 재정의합니다. JPEG와 WebP는 PNG보다 약 3~5배 작아서 AI 대화에서 컨텍스트 크기를 줄이는 데 도움이 됩니다. 설정하지 않으면 기존 기본값("png")이 유지됩니다.

  • 유형: string

  • 선택지: jpeg, png, webp

  • 기본값: false

• --screenshotQuality/ --screenshot-quality 호출자가 지정하지 않을 때 take_screenshot이 JPEG 및 WebP에 사용하는 기본 압축 품질(0-100)을 재정의합니다. 값이 낮을수록 파일이 작아집니다. PNG에는 적용되지 않습니다. 설정하지 않으면 Puppeteer 기본값이 유지됩니다.

  • 유형: number

  • 기본값: false

• --screenshotMaxWidth/ --screenshot-max-width 스크린샷의 최대 너비(픽셀)입니다. 캡처된 이미지가 더 넓으면 반환되기 전에 종횡비를 유지한 채 축소됩니다. AI 대화에서 컨텍스트 크기를 줄여 줍니다. 설정하지 않으면 크기가 조정되지 않습니다.

  • 유형: number

  • 기본값: false

• --screenshotMaxHeight/ --screenshot-max-height 스크린샷의 최대 높이(픽셀)입니다. 캡처된 이미지가 더 높으면 반환되기 전에 종횡비를 유지한 채 축소됩니다. --screenshot-max-width와 함께 사용할 수 있으며 더 작은 배율이 적용됩니다. 설정하지 않으면 크기가 조정되지 않습니다.

  • 유형: number

  • 기본값: false

• --slim 탐색, 스크립트 실행, 스크린샷만 다루는 3가지 도구로 구성된 "슬림" 세트를 노출합니다. 기본적인 브라우저 작업에 유용합니다.

  • 유형: boolean

  • 기본값: false

• --redactNetworkHeaders/ --redact-network-headers true이면 클라이언트에 반환하기 전에 민감한 것으로 간주되는 일부 네트워크 헤더를 편집합니다.

  • 유형: boolean

  • 기본값: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths 설정하면 MCP 클라이언트가 roots 기능을 협상하지 않을 때 적용되는 기본 경로 제한이 비활성화됩니다. 기본적으로 roots가 구성되지 않은 경우 파일 쓰기 도구는 OS 임시 디렉터리로 제한됩니다. MCP roots를 구현하지 않고 임시 디렉터리 외부의 경로에 대한 액세스가 필요한 신뢰할 수 있는 로컬 클라이언트에 연결할 때만 사용하세요.

  • 유형: boolean

  • 기본값: false

JSON 구성의 args 속성을 통해 전달합니다. 예를 들어:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

사용자 지정 헤더를 사용한 WebSocket 연결

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

개념

사용자 데이터 디렉터리

opera-devtools-mcp는 다음 사용자 데이터 디렉터리를 사용하여 브라우저 인스턴스를 시작합니다.

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

사용자 데이터 디렉터리는 실행 간에 지워지지 않습니다. isolated 옵션을 true로 설정하면 브라우저가 닫힌 후 자동으로 지워지는 임시 사용자 데이터 디렉터리를 대신 사용합니다.

실행 중인 브라우저 인스턴스에 연결

기본적으로 서버는 전용 프로필로 새 Chrome 인스턴스를 시작합니다. 대신 --browser-url을 통해 실행 중인 인스턴스에 연결할 수 있습니다.

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

원격 디버깅 포트를 활성화한 상태로 브라우저를 시작합니다.

macOS (Chrome)

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

macOS (Opera Neon)

/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

[!WARNING] 원격 디버깅 포트를 활성화하면 실행 중인 브라우저 인스턴스에 디버깅 포트가 열립니다. 사용자 머신의 모든 애플리케이션이 이 포트에 연결하여 브라우저를 제어할 수 있습니다. 디버깅 포트가 열려 있는 동안에는 민감한 웹사이트를 탐색하지 않도록 하세요.

Android에서 Chrome 디버깅

이 지침을 참조하세요.

알려진 제한 사항

문제 해결을 참조하세요.

라이선스

Apache 2.0. LICENSE 및 NOTICE를 참조하세요.