Firefox Dev Tools MCP

Firefox DevTools MCP服务器

将任何URL提供给Claude，并获取网页的完整快照。

Firefox会自动打开，捕获所有交互元素（按钮、链接、表单），并返回克劳德可以引用的唯一ID。

快速开始

安装

# 1. Clone or download this repository
git clone https://github.com/f2cmb/firefox-dev-tools-mcp.git
cd firefox-dev-tools-mcp

# 2. Install dependencies
npm install

# 3. Install Firefox for Playwright
npx playwright install firefox

# 4. Build the project
npm run build

Claude桌面配置

macOS： 打开 ~/Library/Application Support/Claude/claude_desktop_config.json

窗户： 打开 %APPDATA%\Claude\claude_desktop_config.json

添加此配置（替换 /ABSOLUTE/PATH/TO/ 根据您的实际路径）：

{
  "mcpServers": {
    "firefox-devtools": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/firefox-dev-tools-mcp/build/index.js"]
    }
  }
}

完全重新启动克劳德桌面。

测试IT

打开克劳德桌面并询问：

Take a snapshot of https://example.com

Firefox将打开并加载页面，Claude将收到所有具有唯一ID的交互元素的完整列表！

所得

当Claude拍摄快照时，您会收到：

Accessibility Snapshot (151 interactive elements)
============================================================
  [uid_1] link "Skip to content"
  [uid_2] searchbox "Search GitHub" (focused)
  [uid_3] button "Sign in"
  [uid_4] button "Sign up"
  heading "Where the world builds software"
  ...

每个交互元素得到：

• 唯一标识符 (uid_1, uid_2等）以供精确参考
• 角色 （按钮、链接、文本框等）
• 标签 或文本内容
• 状态 （聚焦、禁用、检查等）
• 统一资源定位符 对于链接

你能用它做什么？

调试网页

You: "Why is the submit button disabled on https://mysite.com/login?"
Claude: *takes snapshot* "The submit button [uid_5] is disabled because
the email field [uid_2] is empty and required."

提取信息

You: "What products are on https://www.adidas.fr homepage?"
Claude: *takes snapshot* "I found 12 products:
- CHAUSSURE JABBAR - 150€ [uid_46]
- CHAUSSURE ITALIA 60s - 150€ [uid_47]
..."

了解页面结构

You: "What's in the navigation menu of https://example.com?"
Claude: *takes snapshot* "The main navigation has 5 items:
- Home [uid_10]
- Products [uid_11]
- About [uid_12]
..."

可用工具

take_snapshot

捕获包含所有交互元素的网页的可访问性树。

参数：

• url （可选）：要导航到的URL
• verbose （可选）：包括详细的可访问性信息（默认值：false）

Claude的用法示例：

Take a snapshot of https://github.com

evaluate_script

在页面上下文中执行JavaScript代码以进行自定义数据提取。

参数：

• script （必填）：要执行的JavaScript代码
• url （可选）：首先导航到的URL

Claude的用法示例：

Run this script on https://example.com:
document.querySelectorAll('img').length

配置选项

无头模式

默认情况下，Firefox会打开一个可见的窗口。要无头运行，请执行以下操作：

{
  "mcpServers": {
    "firefox-devtools": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/firefox-dev-tools-mcp/build/index.js"],
      "env": {
        "FIREFOX_HEADLESS": "true"
      }
    }
  }
}

适用于其他MCP兼容助手

此服务器可与任何兼容MCP的AI助手配合使用。根据助手的MCP服务器设置说明进行配置。服务器通过stdio进行通信，并提供 take_snapshot 和 evaluate_script 工具。

故障排除

Firefox无法启动

确保安装了Playwright浏览器：

npx playwright install firefox

克劳德没有看到工具

1. 验证配置文件中的路径是否绝对正确
2. 确认你跑了 npm run build
3. 完全重新启动克劳德桌面
4. 检查MCP服务器登录 ~/Library/Logs/Claude/ （macOS）或 %APPDATA%\Claude\logs\ （Windows）

“辅助功能树不可用”

有些页面不公开可访问性树。尝试使用 evaluate_script 而是直接提取DOM信息。

发展

# Run in development mode
npm run dev

# Watch mode (auto-rebuild on changes)
npm run watch

# Build for production
npm run build

路线图

计划的未来功能：

• 网络请求监控
• 控制台日志捕获
• 按UID单击/与元素交互
• 以编程方式填写表单
• 等待元素/事件

许可证

麻省理工学院

作者

f2cmb

______________________________________________________________________

内置于 模型上下文协议 和 剧作家