Safari Devtools Mcp

Safari DevTools MCP

safari-devtools-mcp 可让你的编码 Agent（例如 Claude、Cursor、Copilot 或 Gemini）控制和检查 macOS 上正在运行的 Safari 浏览器。它充当 Model-Context-Protocol（MCP）服务，让你的 AI 编码助手能够使用 Safari DevTools 进行调试、自动化和测试。

Chrome 开发者可以通过 Google 的 chrome-devtools-mcp 获得强大的 AI 调试能力。Safari 开发者也应该拥有同等的工具——本项目将同样的体验带到 Safari，并采用匹配的工具名称和参数架构，让你能够轻松切换浏览器。

更新日志 | 贡献指南

注意： 此服务会向 MCP 客户端公开浏览器内容（页面数据、控制台日志、网络流量）。会话处于活动状态时，请避免浏览敏感网站或输入凭据。

为什么选择 safari-devtools-mcp？

本项目使用 WebDriver 提供仅靠脚本无法实现的功能：

• 捕获网络请求／响应正文 — 拦截 fetch 和 XHR 调用，获取完整的标头、负载和时间信息
• 通过无障碍树生成 DOM 快照 — 使用页面重新渲染后仍然稳定的元素 UID，而非脆弱的 CSS 选择器
• 检查 CSS 计算样式 — 读取任意元素的任意计算属性
• 管理 Cookie 和存储 — 读取、写入和删除 Cookie、localStorage 及 sessionStorage
• 元素级截图 — 捕获单个元素，而不仅仅是整个视口
• 会话自动恢复 — 检测失效的 SafariDriver 会话并自动重新连接

主要功能

• 浏览器调试：捕获控制台日志、检查网络请求并执行 JavaScript，同时获取堆栈跟踪以及完整的请求／响应详情。
• 可靠的自动化：使用带有稳定 UID 的无障碍树快照进行点击、输入、填写表单、拖放和触发键盘快捷键。
• 原生 macOS 集成：通过 AppleScript 管理标签页，包括列出、切换和控制多个窗口中的 Safari 标签页

要求

• macOS（Safari 和 SafariDriver 仅适用于 Apple 平台）
• Node.js 18+（推荐使用 22+）
• Safari，并已启用远程自动化

Safari 设置

1. 打开 Safari > 设置 > 高级 > 勾选 “显示网页开发者功能”
2. 开发菜单 > 勾选 “允许远程自动化”
3. 授权 SafariDriver：

   sudo safaridriver --enable
   

开始使用

标准 MCP 配置：

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": ["-y", "safari-devtools-mcp@latest"]
    }
  }
}

claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

git clone https://github.com/HayoDev/safari-devtools-mcp.git
cd safari-devtools-mcp
npm install && npm run build

{
  "mcpServers": {
    "safari-devtools": {
      "command": "node",
      "args": [
        "/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js"
      ]
    }
  }
}

你的第一个提示词

访问 https://example.com，截取快照，并列出所有控制台错误。

精简模式

使用 --slim，通过缩短工具描述来减少 token 用量。适用于使用上下文受限的模型或进行长时间对话的场景：

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": ["-y", "safari-devtools-mcp@latest", "--slim"]
    }
  }
}

提示词（技能）

该服务通过 MCP 提示词提供引导式调试工作流。支持提示词的客户端（例如 Claude Desktop、Claude Code）可以按名称调用：

工具（45）

调试

页面内容

导航

滚动

CSS 检查

Cookie 和存储

输入自动化

iOS Safari 验证

架构

MCP Client (Claude, Cursor, etc.)
    | stdio (MCP protocol)
    v
Safari DevTools MCP Server
    |
    v
+-------------------------------+
|  SafariDriver                 |
|  +-- Selenium WebDriver       | <-- Browser automation
|  +-- JS Injection             | <-- Console/Network capture
|  +-- AppleScript (osascript)  | <-- Native tab management
+-------------------------------+
    |
    v
Safari Browser

已知限制

• 单一会话：Safari 一次只允许一个 WebDriver 会话。不支持同时运行多个实例。
• 仅限 macOS：Safari 和 SafariDriver 仅适用于 Apple 系统，此 MCP 服务无法在 Linux 或 Windows 上运行。
• 不支持无头模式：Safari 不支持无头运行。必须使用可见的浏览器窗口。
• 控制台注入前的空缺：在注入捕获脚本之前记录的控制台消息不会被捕获。
• 网络注入前的空缺：注入前发出的网络请求会通过 Performance API 补录，但详情有限（只有时间和大小，没有标头或状态码）。
• 仅支持 PNG：Safari WebDriver 仅支持 PNG 截图，不支持 JPEG 或 WebP。无法捕获整页。
• AppleScript 权限：标签页管理功能需要 macOS 辅助功能权限才能使用 osascript。

致谢

• chrome-devtools-mcp，由 Google/ChromeDevTools 开发——本项目的灵感来源及其借鉴的接口标准。工具名称和架构有意保持兼容，因此你可以在 Chrome 和 Safari 之间无缝切换。
• safari-mcp-server——我们在开发期间研究的 Safari MCP 集成先例。

许可证

MIT