firefox-devtools-mcp
官方用于 Firefox 开发者工具的模型上下文协议服务器——使 AI 助手能够通过远程调试协议检查和操控 Firefox 浏览器
你可以用 Firefox DevTools MCP 做什么?
- 代理浏览 — 让您的助手使用
take_snapshot、click_by_uid和fill_by_uid导航页面、填写表单并完成多步骤工作流。 - Web 开发检查 — 让助手加载您的页面,并通过
list_console_messages、list_network_requests和list_downloads检查控制台消息、网络请求和下载内容。 - JavaScript 评估 — 使用
evaluate_script在页面上下文中运行自定义脚本,以提取数据或测试功能。 - 截图捕获 — 使用
screenshot_page请求页面截图,并可通过saveTo参数选择将大输出直接保存到磁盘。 - 页面管理 — 使用
list_pages、select_page和navigate_page在打开的标签页之间切换并导航到新的 URL。
文档
Firefox DevTools MCP
Model Context Protocol 服务器,让 AI 代理能够使用 Firefox。它有两个主要用例:
- 代理浏览:代理使用浏览器执行常规任务,例如阅读页面、填写表单以及完成网站上的多步骤流程。
- 代理辅助 Web 开发:代理加载您正在处理的页面,并使用开发者工具(如控制台、网络请求、调试器和性能分析器)进行检查。
它通过 WebDriver BiDi(经由 Selenium WebDriver)控制 Firefox,并可与 Claude Code、Claude Desktop、Cursor、Cline 及其他 MCP 客户端配合使用。
仓库:https://github.com/mozilla/firefox-devtools-mcp
注意:此 MCP 服务器需要本地安装 Firefox 浏览器,无法在 glama.ai 等云托管服务上运行。使用
npx @mozilla/firefox-devtools-mcp@latest在本地运行,或使用提供的 Dockerfile 配合 Docker。
安全性
浏览器 MCP 服务器存在固有风险。几个关键实践:
- 使用专用的 Firefox 配置文件。 切勿对您的常规配置文件运行服务器——代理可以访问浏览器能访问的任何内容,包括 Cookie 和已保存的会话。
- 谨慎选择访问的网站。 页面可能返回旨在操纵代理的内容(提示注入)。请坚持访问您控制或信任的站点。
- 仅启用您需要的工具模块。 默认的
basic预设已包含evaluate_script;--tool-preset slim会将其移除。更高的预设(如--tool-preset developer(调试、网络、控制台、性能分析器)和--tool-preset mozilla(特权上下文))会进一步扩展代理的能力。
有关风险的完整说明以及如何报告漏洞,请参阅 SECURITY.md。
要求
- Node.js ≥ 20.19.0
- 已安装 Firefox 100+(自动检测,或通过
--firefox-path指定)
使用 Claude Code 或 Codex 安装和使用(npx)
推荐:使用 npx,以便运行 npm 上发布的最新版本。
选项 A — 命令行
Claude Code
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest
# Headless + viewport via args
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720
# Or via environment variables
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest \
--env START_URL=https://example.com \
--env FIREFOX_HEADLESS=true
Codex
codex mcp add firefox-devtools -- npx @mozilla/firefox-devtools-mcp@latest
# Headless + viewport via args
codex mcp add firefox-devtools -- \
npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720
# Or via environment variables
codex mcp add firefox-devtools \
--env START_URL=https://example.com \
--env FIREFOX_HEADLESS=true \
-- npx @mozilla/firefox-devtools-mcp@latest
选项 B — 编辑配置文件
Claude Code
添加到 Claude Code 的 mcp_settings.json:
{
"mcpServers": {
"firefox-devtools": {
"command": "npx",
"args": ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"],
"env": {
"START_URL": "about:blank"
}
}
}
}
Codex
添加到 ~/.codex/config.toml:
[mcp_servers.firefox-devtools]
command = "npx"
args = ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"]
[mcp_servers.firefox-devtools.env]
START_URL = "about:blank"
选项 C — 辅助脚本(本地开发构建)
npm run setup
# Choose Claude Code; the script saves JSON to the right path
使用 MCP Inspector 试用
npx @modelcontextprotocol/inspector npx @mozilla/firefox-devtools-mcp@latest --start-url https://example.com --headless
然后调用如下工具:
list_pages、select_page、navigate_pagetake_snapshot然后click_by_uid/fill_by_uidlist_network_requests(始终开启捕获)、get_network_requestlist_downloads(始终开启捕获)、set_download_behaviorscreenshot_page、list_console_messages
命令行选项
您可以传递标志或环境变量(右侧为名称):
--firefox-path— Firefox 可执行文件的绝对路径--headless— 无界面运行(FIREFOX_HEADLESS=true)--viewport 1280x720— 初始窗口大小--profile-path— 使用特定的 Firefox 配置文件。Firefox 在该路径的firefox_devtools_mcp_profile子文件夹中运行,并以.firefox-devtools-mcp文件标记;将--profile-path指向已标记的配置文件将直接复用--firefox-arg— 额外的 Firefox 参数(可重复)--start-url— 启动时打开此 URL(START_URL)--accept-insecure-certs— 忽略 TLS 错误(ACCEPT_INSECURE_CERTS=true)--connect-existing— 附加到已运行的 Firefox 而不是启动新实例(CONNECT_EXISTING=true)--marionette-port— 连接现有模式的 Marionette 端口,默认 2828(MARIONETTE_PORT)--pref name=value— 通过moz:firefoxOptions在启动时设置 Firefox 偏好(可重复)--tool-preset— 选择要启用的工具模块:slim、basic(默认)、developer、mozilla或all。参见 工具模块和预设。(TOOL_PRESET)--tools— 显式启用的工具模块列表,完全覆盖--tool-preset(例如--tools pages network script)。参见 工具模块和预设。--enable-script— 已弃用,请使用--tool-preset developer或--tools ... script debugging。 选择developer工具预设。(ENABLE_SCRIPT=true)--enable-privileged-context— 已弃用,请使用--tool-preset mozilla或--tools ... privileged prefs。 选择mozilla工具预设。需要MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1(ENABLE_PRIVILEGED_CONTEXT=true)--android-device— 启用 Firefox for Android 模式;值为 ADB 设备序列号(例如emulator-5554)。运行adb devices列出已连接的设备。省略值或使用auto自动选择唯一连接的设备。--android-wipe-app-data— 确认 Android 模式会清除目标应用的所有数据。必须与--android-device一起使用。(ANDROID_WIPE_APP_DATA=true)--android-package— Android 应用包名,默认org.mozilla.firefox。其他包:org.mozilla.firefox_beta用于 Firefox Beta,org.mozilla.fenix用于 Firefox Nightly,org.mozilla.fenix.debug用于 Firefox Nightly Debug,org.mozilla.geckoview_example用于 geckoview(ANDROID_PACKAGE)--unrestricted-save-paths— 允许saveTo参数写入磁盘上的任意位置,而不是默认根目录。参见 将大量输出保存到磁盘 以及 SECURITY.md 中的安全说明。(UNRESTRICTED_SAVE_PATHS=true)--log-file— 将 MCP 服务器日志写入文件而不是 stderr。对于隐藏服务器输出的 MCP 客户端的调试会话很有用。设置DEBUG=*以同时包含详细的调试日志。示例:--log-file /tmp/firefox-mcp.log
工具模块和预设
工具按模块分组。您可以通过命名预设(--tool-preset)或显式列表(--tools)选择要暴露的模块。当两者都给出时,--tools 优先,预设被忽略。
预设(每个都是前一个的超集):
slim— 浏览和与页面交互所需的最少工具basic(默认)— 添加常规浏览工具developer— 添加 Web 开发者工具mozilla— 添加 Firefox 开发者工具all— 所有模块
有关模块列表及各预设包含的模块,请参阅 docs/tools.md。
请注意,默认的 basic 包含 script,因此包含 evaluate_script 工具。有关这对攻击面的影响,请参阅 SECURITY.md,并使用 --tool-preset slim 或显式的 --tools 列表将其移除。
# Use the developer preset (adds network, console, debugging and profiler tools)
npx @mozilla/firefox-devtools-mcp --tool-preset developer
# Enable only the modules you need
npx @mozilla/firefox-devtools-mcp --tools pages network console
prefs 和 privileged 模块需要 MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1,仅在 Mozilla 内部构建中可用。launch 模块也需要 Mozilla 内部构建:它会在调用者选择的二进制文件、配置文件、环境和偏好集下重启 Firefox,这是操作员应拥有的配置更改。请改用 --pref、--firefox-path 及其他命令行选项。bidi 模块同样需要 Mozilla 内部构建:它可以发送任何 WebDriver BiDi 命令,因此可以访问其他模块暴露的所有功能。公共包即使被请求也会跳过这些模块,并记录一条警告,说明被跳过的模块名称。
有用的偏好设置(--pref)
- remote.prefs.recommended=false。当 Firefox 在自动化模式下运行时,它会应用 RecommendedPreferences 来修改浏览器行为以进行测试。将 remote.prefs.recommended 设置为 false 可跳过这些设置,获得更接近常规 Firefox 实例的配置。
- remote.log.level=Trace。在 Firefox 中启用详细的 WebDriver 协议日志。MCP 服务器会自动将匹配的日志级别传递给 geckodriver,使双方以相同的详细程度记录日志。
- app.update.disabledForTesting=false。允许 Firefox 自动下载和应用更新。请注意,更新可能会中断您的会话。还需要同时设置 remote.prefs.recommended=false。
Firefox for Android
使用 --android-device 自动化在 Android 设备上运行的 Firefox。需要 PATH 中有 adb 以及自动管理的 geckodriver。
警告: Android 模式会在每次会话前清除目标应用的所有数据。 标签页、历史记录、书签、密码、Cookie 和设置都会丢失。geckodriver 在创建会话时运行
adb shell pm clear <package>,且无法跳过,然后在自己的临时配置文件上运行会话,该配置文件之后会被删除。 因此,--android-device需要--android-wipe-app-data,您应该 安装专用于自动化的构建版本,而不是自动化您日常使用的浏览器。 Bug 2064088 跟踪为 geckodriver 添加 保留现有应用数据的选项。
# List connected devices
adb devices
# Launch Firefox for Android on the single connected device
npx @mozilla/firefox-devtools-mcp --android-device auto --android-wipe-app-data
# Target a specific device
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-wipe-app-data
# Use Firefox Nightly instead
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-package org.mozilla.fenix --android-wipe-app-data
主机与设备之间的端口转发由 geckodriver 自动处理。
连接到现有 Firefox
使用 --connect-existing 自动化您的真实浏览会话,保留 Cookie、登录信息和打开的标签页:
# Start Firefox with Marionette and the Remote Agent (BiDi)
firefox --marionette --remote-debugging-port
# Run the MCP server
npx @mozilla/firefox-devtools-mcp --connect-existing --marionette-port 2828
两个标志都是必需的,因为 MCP 同时使用 WebDriver Classic(--marionette)和 WebDriver BiDi(--remote-debugging-port)。如果 Firefox 仅以 --marionette 启动,MCP 服务器将无法连接,并要求您使用两个标志重启 Firefox。
警告: 在正常浏览期间不要保持 Marionette 启用。它会设置
navigator.webdriver = true并更改其他浏览器指纹信号, 这可能会触发 Cloudflare、Akamai 等保护网站的机器人检测。 仅在需要 MCP 自动化时启用 Marionette,之后正常重启 Firefox。
工具概览
有关按模块划分的完整工具列表(包含描述和参数,从源码生成),请参阅 docs/tools.md。
将大量输出保存到磁盘
大型工具输出会消耗 CLI 客户端(如 Claude Code)中的大量上下文。多个工具接受可选的 saveTo 参数,将结果写入文件而不是内联返回。有关列表,请参阅 docs/tools.md。
saveTo 采用三种形式之一:
- 文件路径(相对于当前工作目录,或
~/.firefox-devtools-mcp/output内的绝对路径;父目录会自动创建)。到达 Firefox 配置文件或此服务器读回的文件路径会被拒绝 - 现有目录(在其中生成带时间戳的文件)
true(在~/.firefox-devtools-mcp/output/下生成带时间戳的文件)
响应返回路径和字节大小。保存的文件始终包含完整、未截断的数据:内联大小保护(控制台消息上限、网络头截断、快照行数上限)不适用于保存的文件。
生成文本的工具还接受 preview,即保存输出中要内联回显的字符数,作为简短摘录。docs/tools.md 中的列表显示了哪些工具支持此功能。
screenshot_page({ saveTo: "page.png" })
take_snapshot({ saveTo: true })
list_network_requests({ urlContains: "api", saveTo: "network.json" })
evaluate_script({ function: "() => performance.getEntries()", saveTo: true, preview: 2000 })
默认情况下,保存路径受限:相对路径相对于当前工作目录解析,绝对路径仅允许在 ~/.firefox-devtools-mcp 内。超出这些位置的路径会被拒绝。使用 --unrestricted-save-paths 启动服务器可写入任意位置,包括该目录之外的绝对路径。
保存的文件随后可以通过例如 Claude Code 的 Read 工具查看,而不会影响上下文大小。
本地开发
npm install
npm run build
# Run with Inspector against local build
npx @modelcontextprotocol/inspector node dist/index.js --headless --viewport 1280x720
# Or run in dev with hot reload
npm run inspector:dev
有关本地开发、测试和 CI 的更多详细信息,请参阅 CONTRIBUTING.md。
故障排除
- 找不到 Firefox:请传入
--firefox-path "/Applications/Firefox.app/Contents/MacOS/firefox"(macOS)或您操作系统上的正确路径。 - 首次运行较慢:Selenium 会建立 BiDi 会话;后续运行会更快。
- UID 过期:UID 在其元素被移除或页面导航前一直有效;当 UID 工具报告某个 UID 已失效时,请获取新的快照(
take_snapshot)。 - Windows 10:在发现 MCP 服务器“firefox-devtools”时出错:MCP 错误 -32000:连接已关闭
-
解决方案 1 使用
cmd /c包装(详情):"mcpServers": { "firefox-devtools": { "command": "cmd", "args": ["/c", "npx", "-y", "@mozilla/firefox-devtools-mcp@latest"] } } -
解决方案 2 使用
npx的绝对路径(调整扩展名——.cmd、.bat、.exe或.ps1——以匹配您的设置):"mcpServers": { "firefox-devtools": { "command": "C:\\nvm4w\\nodejs\\npx.ps1", "args": ["-y", "@mozilla/firefox-devtools-mcp@latest"] } }
-
版本控制
- 1.0 之前的 API:版本从
0.x开始。使用带 npx 的@latest获取最新版本。
贡献
请参阅 CONTRIBUTING.md 了解如何提交问题、运行测试以及在本地进行项目开发。
作者
由 Mozilla 维护。
许可证
您可以选择在 MIT 或 Apache 2.0 许可下使用。