browser-devtools-mcp

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

Navigate back in browser history

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

Click an element on the page by selector or ref

Get console messages from the browser

Drag an element to a target location by selector or ref

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

Compare the current page with a Figma design

Fill an input field with text by selector or ref

Navigate forward in browser history

Hover over an element on the page by selector or ref

Get HTML content from the current page

Intercept HTTP requests matching a pattern

Press a key or key combination

Mock HTTP responses for testing

Monitor and inspect HTTP network requests

Configure and inspect OpenTelemetry instrumentation

Save the current page as a PDF file

Inspect React components on the page

Reload the current page

Resize the browser viewport

Execute JavaScript code in the browser

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

Scroll the page or an element

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

Get visible text content from the current page

Manage OpenTelemetry trace IDs for distributed tracing

Wait for network activity to become idle

Get Core Web Vitals metrics from the current page

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

Disconnect from the connected Node.js process

Configure exception breakpoints to capture snapshots on exceptions

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

Set a logpoint to evaluate and log expressions without pausing

Get console output from the connected Node.js process

Execute JavaScript in the connected Node.js process

Get captured tracepoint, logpoint, or exceptionpoint snapshots

Get debugging status of the connected Node.js process

Set a tracepoint to capture call stack and variables without pausing

Audits web pages for WCAG compliance and accessibility issues

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

Compares web implementations with Figma designs for visual QA

Evaluates web page performance using Core Web Vitals and network analysis

Performs comprehensive web application testing for functionality and usability

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

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

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.

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.

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

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

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.