browser-devtools-mcp-vscode

# Browser DevTools MCP VSCode Extension > Skill by [ara.so](https://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 ## Installation ### From Open VSX Registry ```bash # VS Code code --install-extension serkan-ozal.browser-devtools-mcp-vscode # Cursor cursor --install-extension serkan-ozal.browser-devtools-mcp-vscode ``` ### From VSIX File ```bash # VS Code code --install-extension browser-devtools-mcp-vscode-x.x.x.vsix # Cursor cursor --install-extension browser-devtools-mcp-vscode-x.x.x.vsix ``` ### First-Time Setup On first activation, the extension downloads Playwright browsers (default: Chromium). To customize: 1. Open Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) 2. Run: **Browser DevTools MCP: Install Playwright Browsers...** 3. Select browsers: Chromium (default), Firefox, and/or WebKit Alternatively, configure in Settings: - `browserDevtoolsMcp.install.chromium` (default: `true`) - `browserDevtoolsMcp.install.firefox` (default: `false`) - `browserDevtoolsMcp.install.webkit` (default: `false`) ## Configuration ### Quick Settings Panel Open the **Browser DevTools MCP** panel in the Explorer sidebar for common settings. ### Full Settings Open VS Code Settings (`Ctrl+,` / `Cmd+,`) and search for "Browser DevTools MCP" or run: ``` Browser DevTools MCP: Open Settings ``` ### Key Settings #### General ```json { "browserDevtoolsMcp.enable": true, "browserDevtoolsMcp.telemetry.enable": true, "browserDevtoolsMcp.platform": "browser" // "browser" or "node" } ``` #### Browser Configuration ```json { "browserDevtoolsMcp.browser.headless": true, "browserDevtoolsMcp.browser.persistent": false, "browserDevtoolsMcp.browser.userDataDir": "", "browserDevtoolsMcp.browser.useSystemBrowser": false, "browserDevtoolsMcp.browser.executablePath": "", "browserDevtoolsMcp.browser.locale": "en-US" } ``` #### CDP (Chrome DevTools Protocol) Mode ```json { "browserDevtoolsMcp.browser.cdp.enable": false, "browserDevtoolsMcp.browser.cdp.endpointUrl": "" // e.g., "http://localhost:9222" } ``` #### Network & Security ```json { "browserDevtoolsMcp.network.proxy": "", // e.g., "http://proxy.example.com:8080" "browserDevtoolsMcp.network.bypassProxy": "", "browserDevtoolsMcp.network.ignoreHTTPSErrors": false } ``` #### Debugging ```json { "browserDevtoolsMcp.debug.enable": false, "browserDevtoolsMcp.debug.screenshots": false, "browserDevtoolsMcp.debug.traces": false, "browserDevtoolsMcp.debug.videos": false, "browserDevtoolsMcp.debug.outputDir": "" } ``` #### OpenTelemetry ```json { "browserDevtoolsMcp.otel.enable": false, "browserDevtoolsMcp.otel.exporterUrl": "", // e.g., "http://localhost:4318/v1/traces" "browserDevtoolsMcp.otel.serviceName": "browser-devtools-mcp", "browserDevtoolsMcp.otel.propagationHeaderName": "traceparent" } ``` ## Using with AI Assistants ### In Cursor The extension automatically registers the MCP server via Cursor's native MCP API. AI assistants can directly invoke browser automation tools. **Example prompts:** ``` "Navigate to example.com and take a screenshot" "Run accessibility audit on the current page" "Measure Core Web Vitals for https://example.com" "Click the submit button and capture network requests" "Mock the /api/users endpoint to return test data" ``` ### In VS Code (1.96+) The extension registers via `vscode.lm.registerMcpServerDefinitionProvider`. GitHub Copilot can use the MCP tools. ## MCP Tools Reference ### Navigation & Interaction #### navigate ```typescript // Navigate to URL { "url": "https://example.com", "waitUntil": "networkidle" // "load" | "domcontentloaded" | "networkidle" } ``` #### click ```typescript // Click element by selector { "selector": "button.submit", "timeout": 30000 } ``` #### fill ```typescript // Fill form input { "selector": "input[name='email']", "value": "test@example.com" } ``` #### type ```typescript // Type text with keyboard simulation { "selector": "textarea", "text": "Hello world", "delay": 100 // ms between keystrokes } ``` #### select ```typescript // Select dropdown option { "selector": "select[name='country']", "values": ["US"] } ``` ### Inspection & Testing #### screenshot ```typescript // Capture screenshot { "fullPage": true, "selector": null, // or specific element selector "path": "/tmp/screenshot.png" // optional } ``` #### accessibility_snapshot ```typescript // Get accessibility tree { "selector": "main" // optional, default entire page } ``` #### accessibility_audit ```typescript // Run accessibility audit { "includeWarnings": true, "selector": null } ``` #### web_vitals ```typescript // Measure Core Web Vitals { "url": "https://example.com" } ``` ### Network #### network_requests ```typescript // Get network request log { "filter": { "url": "/api/*", "method": "GET", "status": 200 } } ``` #### mock_route ```typescript // Mock API endpoint { "pattern": "**/api/users", "response": { "status": 200, "body": { "users": [{"id": 1, "name": "Test User"}] }, "headers": { "Content-Type": "application/json" } } } ``` #### unmock_route ```typescript // Remove mock { "pattern": "**/api/users" } ``` ### React DevTools #### react_inspect_element ```typescript // Inspect React component { "selector": "div.App" } ``` #### react_get_component_tree ```typescript // Get full component tree {} ``` ### Debugging #### set_tracepoint ```typescript // Non-blocking breakpoint with logging { "source": "app.js", "line": 42, "condition": "user.id === 123", "logMessage": "User: {user.name}" } ``` #### set_logpoint ```typescript // Inject console.log { "source": "utils.js", "line": 15, "message": "Value: {myVariable}" } ``` #### watch_expression ```typescript // Watch expression value { "expression": "this.state.count", "source": "Counter.jsx" } ``` ### Batch Execution #### execute ```typescript // Execute multiple operations { "code": ` // Navigate await callTool('navigate', { url: 'https://example.com' }); // Fill form await page.fill('input[name="search"]', 'test query'); // Click and wait await page.click('button[type="submit"]'); await page.waitForLoadState('networkidle'); // Capture screenshot const screenshot = await callTool('screenshot', { fullPage: true }); return { screenshot }; ` } ``` ## Common Patterns ### Automated Testing Workflow ```typescript // AI prompt: "Test the login flow and capture results" // 1. Navigate to login page await callTool('navigate', { url: 'https://app.example.com/login' }); // 2. Fill credentials (use environment variables) await callTool('fill', { selector: 'input[name="username"]', value: process.env.TEST_USERNAME }); await callTool('fill', { selector: 'input[name="password"]', value: process.env.TEST_PASSWORD }); // 3. Submit form await callTool('click', { selector: 'button[type="submit"]' }); // 4. Wait for navigation await callTool('wait', { selector: '.dashboard', timeout: 5000 }); // 5. Capture evidence const screenshot = await callTool('screenshot', { fullPage: true }); // 6. Run accessibility audit const audit = await callTool('accessibility_audit', {}); ``` ### Performance Testing ```typescript // AI prompt: "Measure performance of the homepage" const vitals = await callTool('web_vitals', { url: 'https://example.com' }); // vitals contains: LCP, INP, CLS, TTFB, FCP console.log(`LCP: ${vitals.LCP}ms`); console.log(`CLS: ${vitals.CLS}`); ``` ### API Mocking for Frontend Tests ```typescript // AI prompt: "Mock the user API and test the profile page" // 1. Set up mock await callTool('mock_route', { pattern: '**/api/user/profile', response: { status: 200, body: { id: 1, name: 'Test User', email: 'test@example.com' } } }); // 2. Navigate and test await callTool('navigate', { url: 'https://app.example.com/profile' }); // 3. Verify UI await callTool('screenshot', { selector: '.profile-card' }); // 4. Clean up await callTool('unmock_route', { pattern: '**/api/user/profile' }); ``` ### Debugging with Tracepoints ```typescript // AI prompt: "Debug the checkout flow without stopping execution" // Set tracepoint at critical function await callTool('set_tracepoint', { source: 'checkout.js', line: 78, condition: 'cart.total > 1000', logMessage: 'High value cart: {cart.total}, items: {cart.items.length}' });