browser-devtools-mcp

Plugin browser-devtools-mcp from marketplace browser-devtools in serkan-ozal/browser-devtools-claude. Commands read from the repo's manifest — 1 month ago.

Skills (7)

• browser-testing

  Automated browser testing and debugging using Browser DevTools MCP. Use when testing web pages, debugging frontend issues, verifying UI behavior, or automating browser interactions.

• execute-workflows

  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.

• node-debugging

  Debug Node.js backend processes using non-blocking tracepoints, logpoints, exceptionpoints, and JavaScript execution. Use when debugging API servers, workers, or backend scripts.

• observability

  Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when correlating frontend and backend requests or debugging request flow across services.

• performance-audit

  Analyze web page performance using Web Vitals and network timing metrics. Use when optimizing load times, checking Core Web Vitals, or investigating slow pages.

• visual-testing

  Perform visual testing and UI verification using screenshots and DOM inspection. Use when verifying UI appearance, comparing with designs, or checking for visual regressions.

• web-debugging

  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.

Slash commands (39)

• /browser-devtools-mcp:browser:accessibility

  Run accessibility analysis on the current page using ARIA snapshots and AX tree

• /browser-devtools-mcp:browser:back

  Navigate back in browser history

• /browser-devtools-mcp:browser:browse

  Navigate to a URL and interact with web pages using Browser DevTools MCP

• /browser-devtools-mcp:browser:click

  Click an element on the page by selector or ref

• /browser-devtools-mcp:browser:console

  Get console messages from the browser

• /browser-devtools-mcp:browser:drag

  Drag an element to a target location by selector or ref

• /browser-devtools-mcp:browser:execute

  Batch tool calls via JavaScript (no slash command; use from agent/skill or MCP)

• /browser-devtools-mcp:browser:figma

  Compare the current page with a Figma design

• /browser-devtools-mcp:browser:fill

  Fill an input field with text by selector or ref

• /browser-devtools-mcp:browser:forward

  Navigate forward in browser history

• /browser-devtools-mcp:browser:hover

  Hover over an element on the page by selector or ref

• /browser-devtools-mcp:browser:html

  Get HTML content from the current page

• /browser-devtools-mcp:browser:intercept

  Intercept HTTP requests matching a pattern

• /browser-devtools-mcp:browser:keypress

  Press a key or key combination

• /browser-devtools-mcp:browser:mock

  Mock HTTP responses for testing

• /browser-devtools-mcp:browser:network

  Monitor and inspect HTTP network requests

• /browser-devtools-mcp:browser:otel

  Configure and inspect OpenTelemetry instrumentation

• /browser-devtools-mcp:browser:pdf

  Save the current page as a PDF file

• /browser-devtools-mcp:browser:react

  Inspect React components on the page

• /browser-devtools-mcp:browser:reload

  Reload the current page

• /browser-devtools-mcp:browser:resize

  Resize the browser viewport

• /browser-devtools-mcp:browser:run-js-browser

  Execute JavaScript code in the browser

• /browser-devtools-mcp:browser:screenshot

  Take a screenshot of the current browser page or a specific element

• /browser-devtools-mcp:browser:scroll

  Scroll the page or an element

• /browser-devtools-mcp:browser:select

  Select an option from a dropdown or select element by selector or ref

• /browser-devtools-mcp:browser:text

  Get visible text content from the current page

• /browser-devtools-mcp:browser:trace

  Manage OpenTelemetry trace IDs for distributed tracing

• /browser-devtools-mcp:browser:wait

  Wait for network activity to become idle

• /browser-devtools-mcp:browser:webvitals

  Get Core Web Vitals metrics from the current page

• /browser-devtools-mcp:node:connect

  Connect to a Node.js process for debugging via V8 Inspector

• /browser-devtools-mcp:node:disconnect

  Disconnect from the connected Node.js process

• /browser-devtools-mcp:node:exceptionpoint

  Configure exception breakpoints to capture snapshots on exceptions

• /browser-devtools-mcp:node:execute

  Batch tool calls via JavaScript (no slash command; use from agent/skill or MCP)

• /browser-devtools-mcp:node:logpoint

  Set a logpoint to evaluate and log expressions without pausing

• /browser-devtools-mcp:node:logs

  Get console output from the connected Node.js process

• /browser-devtools-mcp:node:run-js-node

  Execute JavaScript in the connected Node.js process

• /browser-devtools-mcp:node:snapshots

  Get captured tracepoint, logpoint, or exceptionpoint snapshots

• /browser-devtools-mcp:node:status

  Get debugging status of the connected Node.js process

• /browser-devtools-mcp:node:tracepoint

  Set a tracepoint to capture call stack and variables without pausing

Subagents (6)

• accessibility-auditor

  Audits web pages for WCAG compliance and accessibility issues

• default

  Default Browser DevTools MCP agent — ARIA/snapshot-first workflow, execute for run JS and batch, ref-based interaction

• design-qa

  Compares web implementations with Figma designs for visual QA

• performance-analyzer

  Evaluates web page performance using Core Web Vitals and network analysis

• qa-tester

  Performs comprehensive web application testing for functionality and usability

• scraper

  Extracts structured data from web pages with navigation and dynamic content support

MCP servers (2)

• browser-devtools

  runs: npx -y browser-devtools-mcp@latest

• node-devtools

  runs: npx -y browser-devtools-mcp@latest

Similar plugins