Browser DevTools MCP VSCode Extension

Skill by ara.so — Devtools Skills collection.

Overview

Browser DevTools MCP for VS Code & Cursor is a Playwright-powered browser automation extension that integrates the browser-devtools-mcp server into your IDE via the Model Context Protocol (MCP). It enables AI assistants like GitHub Copilot and Cursor AI to interact with real web browsers for testing, debugging, and automation tasks.

Key capabilities:

• Browser automation (navigation, clicks, form filling)
• Screenshots and visual testing
• Accessibility audits and ARIA tree inspection
• Core Web Vitals measurement (LCP, INP, CLS, TTFB, FCP)
• Network inspection and request mocking
• React DevTools integration
• OpenTelemetry distributed tracing
• Figma design comparison
• Non-blocking debugging (tracepoints, logpoints, watch expressions)
• Batch execution via JavaScript