메뉴
Automated browser testing and debugging using Browser DevTools MCP. Use when testing web pages, debugging frontend issues, verifying UI behavior, or automating browser interactions.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/serkan-ozal/browser-devtools-claude --skill browser-testing명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Use when the user wants to run JavaScript in the browser, run code in Node, or batch multiple MCP tool calls. Run script, execute code, batch tools.
Debug Node.js backend processes using non-blocking tracepoints, logpoints, exceptionpoints, and JavaScript execution. Use when debugging API servers, workers, or backend scripts.
Debug web applications by inspecting console logs, network requests, JavaScript errors, and using non-blocking tracepoints/logpoints. Use when debugging web pages, inspecting API calls, or tracing code execution.
SKILL.md 표시 중
| name | browser-testing |
| description | Automated browser testing and debugging using Browser DevTools MCP. Use when testing web pages, debugging frontend issues, verifying UI behavior, or automating browser interactions. |
Automated browser testing and debugging skill using Browser DevTools MCP.
Page structure: To understand what is on a page, use ARIA snapshot first (a11y_take-aria-snapshot or a11y_take-ax-tree-snapshot), not screenshot. Use screenshot only when you need to verify how something looks visually (e.g. design check, visual bug).
This skill activates when:
a11y_take-aria-snapshot) — Returns refs (e1, e2, …) and a refs map. Options: interactiveOnly, cursorInteractive (for div/span buttons), selector (scope).e1, @e1). Refs valid until next snapshot or navigation.content_take-screenshot with annotate: true overlays labels [1],[2],… mapping to e1,e2,…navigation_go-to) — returns ARIA snapshot and refs by default; use response refs for interactions without calling a11y_take-aria-snapshot againnavigation_go-back-or-forward and navigation_reload (includeSnapshot: true)e1, #submit)interaction_press-key), scroll (interaction_scroll), drag (interaction_drag)content_take-screenshot) — optional annotate, annotateContent, cursorInteractiveo11y_get-console-messages)o11y_get-http-requests)o11y_get-web-vitals)o11y_get-trace-id, o11y_set-trace-id)a11y_take-aria-snapshot) — returns refs; options: interactiveOnly, cursorInteractive, selectora11y_take-ax-tree-snapshot) — bounding box, occlusion, stylesstub_intercept-http-request)stub_mock-http-response)stub_list)stub_clear)react_get-component-for-element)react_get-element-for-component)page.evaluate() (e.g. return await page.evaluate(() => document.title)). See commands/browser/execute.md for callTool and page.page; use built-ins and callTool). On Node platform, execute runs in the session VM (callTool only).execute — Run custom JavaScript that can call multiple tools in one request via await callTool(name, input, returnOutput?). Use to batch click/fill/select/navigation and reduce round-trips. Code runs in async IIFE (no wrapper); browser platform exposes page (Playwright). Prefer when you have a fixed sequence of steps; use individual tools when you need to inspect results between steps. Also supported: browser-devtools-mcp CLI subcommand run execute, and daemon HTTP API (POST /call with toolName: "execute").a11y_take-aria-snapshot, then use refs (e1, e2) in interactions or take annotated screenshots.annotate: true when you need visual labels that match refs for vision-driven actionsSOC 직업 분류 기준
