툴 지원: Chrome DevTools MCP 레퍼런스 및 RN 전용(get_metro_url, WebView) 체크리스트

[ohah]

툴 지원 (Chrome DevTools MCP / electron-mcp-server 레퍼런스)

레퍼런스: ChromeDevTools/chrome-devtools-mcp
아래 체크는 이 레포(react-native-mcp) 기준이며, 실제로 MCP에 등록·노출된 경우에만 [x]. 제거·대체된 항목은 취소선.
구현 계획(Phase 로드맵): #7

입력·자동화 (Input automation)

• click — MCP 미노출. 워크플로: query_selector → tap(좌표)으로 대체
• drag — 네이티브 swipe (platform으로 iOS/Android 선택)
• fill — RN type_text, 네이티브 input_text (platform으로 iOS/Android 선택)
• fill_form — 미구현 (여러 필드 한꺼번에 채우기)
• hover — 미구현 (모바일에는 호버 없음)
• press_key — 네이티브 input_key (platform으로 iOS/Android 선택)
• upload_file — 네이티브 file_push(앱 샌드박스), add_media(사진/미디어 라이브러리) (platform으로 iOS/Android 선택, PR #30)

플랫폼 중립 네이티브 도구 (iOS / Android)

• list_devices — 부팅된 시뮬레이터/연결된 디바이스 목록 (platform으로 ios | android 선택)
• tap, swipe, input_text, input_key, press_button, describe_ui — 좌표·텍스트·키·버튼·UI 계층
• file_push, add_media — 앱 샌드박스 파일 전송, 사진/동영상 라이브러리 추가 (PR #30)
• switch_keyboard — input_text 사용 전 키보드 언어 전환
• open_deeplink — 딥링크/URL 스킴으로 앱 화면 열기 (platform, deviceId 지원)

(설치·연결: idb-setup.md)

내비게이션 (Navigation automation)

• list_pages — RN은 단일 앱이라 MCP 미노출 (Chrome 탭 개념 없음)
• close_page, navigate_page, new_page, select_page, wait_for

에뮬레이션 / 성능

• emulate, resize_page, performance_*

네트워크 (Network)

• list_network_requests — MCP 등록됨 (XHR/fetch monkey-patch, clear_network_requests 포함)
• get_network_request — list_network_requests 필터로 대체, 별도 단건 조회 도구 미구현

디버깅 (Debugging)

• evaluate_script
• list_console_messages — MCP 등록됨 (PR #23)
• get_console_message — list_console_messages 필터로 대체, MCP 미등록
• take_screenshot — Android adb, iOS simctl. 720p JPEG 80% 고정, pointSize·outputSize 메타 반환 (PR #29·#30)
• visual_compare — 스크린샷·베이스라인 PNG 픽셀 비교, selector 크롭·updateBaseline·saveDiff 지원 (PR #50)
• take_snapshot — RN Fiber 트리, uid = testID 또는 경로
• assert_text, assert_visible, assert_not_visible, assert_element_count — 텍스트/셀렉터 존재·비가시·개수 검증

---

React Native 전용

• get_metro_url — MCP 도구 미노출 (내부 getMetroBaseUrl만 사용)
• click_webview — webview_evaluate_script로 대체 (WebView 내 임의 JS 실행)
• webview_evaluate_script — 앱에 등록된 WebView 내에서 JS 실행 (injectJavaScript, onMessage로 결과 수신)
• get_debugger_status
• scroll — 네이티브 swipe 도구로 대체 (좌표 기반 스크롤 제스처)
• scroll_until_visible — 셀렉터로 스크롤하여 요소가 보일 때까지 스크롤 (FlatList/ScrollView, selector·direction·maxScrolls 등)
• click_by_label — query_selector(:text("...")) + tap으로 대체
• list_clickables — query_selector_all(':has-press')로 대체
• list_text_nodes — query_selector_all('Text')로 대체
• query_selector, query_selector_all — Fiber 셀렉터 기반 검색 (measure 포함). get_by_label, get_by_labels, list_clickable_text_content 대체
• WebView 추가 도구 (fill_webview, snapshot_webview 등) — 선택

구현 완료 (Babel·런타임):

• 다중 디바이스 — N대 동시 연결, deviceId/platform 파라미터, init에서 platform·deviceId 수신
• Babel: PascalCase 컴포넌트 displayName 자동 주입 (Release Fiber 이름 보존)
• Babel: WebView(ref+testID) → registerWebView 자동 주입, ScrollView/FlatList(ref+testID) → registerScrollRef 비활성(INJECT_SCROLL_REF=false, swipe·scroll_until_visible로 대체)

---

레퍼런스 문서 (docs/)

idb·adb·XCUITest/WDA 터치 주입·자동화 참고용 문서 (PR #28·#29·#30 반영):

• idb-setup.md — idb 설치·연결·MCP 도구 사용법 (PR #29)
• ADB_REFERENCE.md — Android adb, input tap/swipe 등 UI 명령
• IDB_REFERENCE.md — iOS idb UI, 좌표·스와이프·접근성
• XCUITEST_WDA_REFERENCE.md — XCUITest, WebDriverAgent
• e2e-yaml-reference.md, e2e-yaml-roadmap.md — E2E YAML 스텝 레퍼런스·로드맵 (Phase 1 스텝: back, home, hideKeyboard, longPress, addMedia, assertHasText, clearText, doubleTap, assertValue 등 구현 완료, PR #39)

---

참고: Chrome DevTools MCP Tool Reference

최종 업데이트: 2026-02-19

[telsav]

Cool project! We've built something similar — an MCP server that supports React Native (along with 7 other platforms).

For the React Native bridge, we inject via the app's JavaScript runtime and expose the component tree through WebSocket. This lets the AI agent inspect components, tap elements, fill text inputs, scroll, and take screenshots.

Some things we learned that might help:

• Metro bundler URL detection can be tricky — we auto-discover it from the dev server
• For element identification, combining testID props with component type + text content gives the most reliable targeting
• Screenshot quality matters for AI vision — JPEG@80% + 720p is the sweet spot (full PNG causes timeout)

Our React Native SDK: https://github.com/ai-dashboad/flutter-skill/tree/main/sdks/react-native

24/24 E2E tests passing. Happy to compare notes on the implementation!

[ohah]

@telsav Thanks for taking an interest in the project — I'm the only one on it, so I didn't expect anyone to notice. I really appreciate it. We're still in early development and iterating freely.

From what I've seen, it was hard to get the MCP quality we want without asking the user's app to install something extra — especially if you want to ease the burden on the AI when fetching WebViews, console, network, lists, and so on. So we tried to keep the install burden as low as possible: the only thing we require is the Babel plugin; we didn't want to add more dependencies or setup steps for the app.

About get_metro_url: we initially thought we'd need it, but for the scope we're targeting right now we didn't feel we had to expose it as an MCP command, so we left it out (we still use the Metro URL internally).

We haven't started implementing it yet, but one of our main open questions is whether things like native drag, file upload, and pinch-to-zoom are achievable within this design — i.e. without pulling in extra native libraries. Our goals are: a React Native MCP that doesn't depend on native libraries, and CI verification via GitHub Actions (YAML-based).

I'm Korean. We have a holiday here until the 18th, and I'm aiming to ship an initial version by then. Thanks again for the feedback and the link to your SDK — I'll take a look when I get a chance. Thanks for the advice; it was really helpful.

[ohah]

PR #24에서 데모 앱 Gesture 탭 추가 및 testID 있음/없음 둘 다 지원 반영했습니다.