{"id":18179,"library":"browser-devtools-mcp","title":"Browser DevTools MCP","description":"A Model Context Protocol (MCP) server that gives AI coding assistants comprehensive browser automation and debugging capabilities, including execution-level inspection (logs, network, console messages) and visual feedback (screenshots, ARIA snapshots, PDFs). Version 0.6.9 is the current stable release; the package is actively developed on GitHub. Supports both Browser (Playwright) and Node.js (Inspector Protocol) platforms with session management, design comparison (Figma), OpenTelemetry integration, and multiple transport modes (stdio, HTTP). Differentiates from generic browser automation tools by focusing on AI agent integration via MCP, providing structured debugging tools (tracepoints, logpoints) and visual snapshots for LLM-based workflows.","status":"active","version":"0.6.9","language":"javascript","source_language":"en","source_url":"https://github.com/serkan-ozal/browser-devtools-mcp","tags":["javascript","ai","mcp","mcp-server","browser","dev-tools","debug","typescript"],"install":[{"cmd":"npm install browser-devtools-mcp","lang":"bash","label":"npm"},{"cmd":"yarn add browser-devtools-mcp","lang":"bash","label":"yarn"},{"cmd":"pnpm add browser-devtools-mcp","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core MCP protocol implementation for server/client communication","package":"@modelcontextprotocol/sdk","optional":false},{"reason":"Browser automation engine for the browser platform","package":"playwright","optional":false},{"reason":"Launches Chrome/Chromium for Node.js Inspector Protocol debugging","package":"chrome-launcher","optional":true},{"reason":"Interacts with Docker containers for Node.js process debugging","package":"dockerode","optional":true}],"imports":[{"note":"Package is ESM-only (type: module). runServer is the main entry point for programmatic usage.","wrong":"const runServer = require('browser-devtools-mcp')","symbol":"runServer","correct":"import { runServer } from 'browser-devtools-mcp'"},{"note":"Session functions are exported from a subpath: 'browser-devtools-mcp/session'.","wrong":"import { createBrowserSession } from 'browser-devtools-mcp'","symbol":"createBrowserSession","correct":"import { createBrowserSession } from 'browser-devtools-mcp/session'"},{"note":"Tool classes are exported from subpaths like 'browser-devtools-mcp/tools' or 'browser-devtools-mcp/node-tools'.","wrong":"import { BrowserTool } from 'browser-devtools-mcp'","symbol":"BrowserTool","correct":"import { BrowserTool } from 'browser-devtools-mcp/tools'"}],"quickstart":{"code":"// Quickstart: run MCP server for Browser platform with stdio transport\nimport { runServer } from 'browser-devtools-mcp';\nimport { BrowserPlatform } from 'browser-devtools-mcp/platforms/browser';\n\nconst platform = new BrowserPlatform({\n  headless: true,\n  defaultViewport: { width: 1280, height: 720 },\n});\n\nrunServer({\n  platform,\n  transport: 'stdio',\n  sessionTimeout: 300000,\n}).catch(console.error);","lang":"typescript","description":"Shows programmatic instantiation of the Browser Platform and running the MCP server via runServer()."},"warnings":[{"fix":"After tab closure, take a new snapshot (e.g., takeScreenshot) before using any element references.","message":"Closed browser tab invalidates element references: after a tab is closed, previous element handles (from screenshots/snapshots) become stale. New tool calls will open a fresh tab, but all prior references must be re-fetched.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Re-evaluate network state after tab recovery; avoid assumptions about pending requests.","message":"Session network-idle state resets on new tab: in-flight request tracking and network idle detection are reset when a tab is reopened. Long-running network operations may cause unexpected timeouts.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use --pid <PID> or --port <PORT> flags instead of --name.","message":"Node platform connection via process name (e.g., '--name myapp') is deprecated. Use PID, port, or WebSocket URL instead.","severity":"deprecated","affected_versions":">=0.4.0"},{"fix":"Update calls to runServer({ platform, transport: 'stdio', sessionTimeout: 300000 }).","message":"v0.6.0 changed the signature of runServer() – first argument is now a options object ({ platform, transport, sessionTimeout }) instead of separate parameters.","severity":"breaking","affected_versions":">=0.6.0 <0.7.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install browser-devtools-mcp --save. Ensure project uses ESM (type: module in package.json) or use dynamic import if using CJS.","cause":"Package not installed or not resolved due to ESM/CJS mismatch","error":"Error: Cannot find module 'browser-devtools-mcp'"},{"fix":"Ensure you import the platform class from the correct subpath, e.g., import { BrowserPlatform } from 'browser-devtools-mcp/platforms/browser'.","cause":"Platform instance not properly instantiated or wrong class imported","error":"TypeError: platform.getTools is not a function"},{"fix":"For Node platform, start Node with --inspect flag. For browser platform, ensure Playwright browsers are installed: npx playwright install.","cause":"Chrome/Chromium is not running or the debug port is not accessible","error":"Error: Connection refused to Chrome DevTools Protocol endpoint"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}