Browser Devtools Claude

浏览器开发工具claude

克劳德插件 浏览器工具MCP --Playwright浏览器自动化和无阻塞Node.js后端调试。与浏览器devtools mcp 0.3.x兼容。

先决条件

• 克劳德代码 （CLI+身份验证）
• Node.js 18+（适用于 npx --MCP服务器作为npm包运行）

安装

选项1：插件（推荐）

1. 在Claude Code中，运行： /plugin
2. 将此回购添加为市场： /plugin marketplace add serkan-ozal/browser-devtools-claude
3. 安装： /plugin install browser-devtools-mcp@serkan-ozal/browser-devtools-claude

选项2：手动MCP配置

示例--添加到 ~/.claude/settings.json （参见 CONFIG.md 更多）：

{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp@latest"],
      "env": {
        "PLATFORM": "browser",
        "BROWSER_HEADLESS_ENABLE": "true"
      }
    },
    "node-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp@latest"],
      "env": {
        "PLATFORM": "node"
      }
    }
  }
}

该插件包括两者 浏览器 和 节点 默认情况下为MCP服务器。此手动设置为您提供了MCP工具，而不需要插件的技能、命令或代理。看 CONFIG.md 对于所有环境变量。

用法

斜杠命令

命令按平台划分。看 文档/命令/.

浏览器 (PLATFORM=browser): /browse, /screenshot, /click, /fill, /hover, /accessibility, /console, /network, /webvitals, /figma, /run-js，以及更多--请参阅 命令/浏览器/.

节点 (PLATFORM=node): /connect, /disconnect, /tracepoint, /logpoint, /snapshots, /run-js-node，以及更多--请参阅 命令/节点/. 执行 （批次）：见 .

代理

启用插件后 默认 代理会自动应用。它强制执行：ARIA/快照优先（不是截图来理解结构），在任何点击/填充/悬停之前快照，以及 执行 用于运行JS和批处理工具调用。您可以通过以下方式切换到另一个代理 /agents 或覆盖默认值（请参见 CONFIG.md).

使用代理执行集中任务：

• 默认 --默认应用；ARIA优先，交互前快照，仅对JS/batch执行
• 可访问性审计员 --WCAG/11年回顾
• 设计质量保证 --Figma与实时UI比较
• 性能分析器 --LCP、CLS、INP
• 质量保证测试仪 --自动化测试流程
• 爬虫 --从页面中提取数据

技能

当你提到以下内容时，该插件会激活技能：

• web调试 --控制台、网络、跟踪点
• 节点调试 --Node.js后端跟踪点
• 浏览器测试 --剧作家风格流
• 执行工作流 --在浏览器/节点中运行JS，批处理工具调用
• 可观测性 --痕迹、酒店
• 绩效审计 --网络生命
• 目视检测 --Figma比较

平台模式

默认情况下，该插件注册了两个MCP服务器：

• 浏览器开发工具 --通过Playwright实现网络自动化(PLATFORM=browser)
• 节点开发工具 --附加到Node.js进程进行非阻塞调试(PLATFORM=node)

两者同时活跃；使用浏览器命令进行网页调试，使用节点命令进行后端调试。

目录

• 技能：web调试、节点调试、浏览器测试、执行工作流、可观察性、性能审计、可视化测试
• 代理：默认值（启用插件时应用）、可访问性审计员、设计质量保证、性能分析器、质量保证测试仪、刮刀
• 配置: CONFIG.md --环境变量和平台选择

这 浏览器开发工具mcp 软件包还提供了一个CLI(browser-devtools-cli, node-devtools-cli)以及一个可选的守护进程。这 执行 工具（批处理工具执行）可通过MCP、CLI子命令获得 run execute，和守护程序API（POST /call).