Safari Devtools MCP

Safari工具MCP

](https://npmjs.org/package/safari-devtools-mcp) ](https://npmjs.org/package/safari-devtools-mcp)  ](https://npmjs.org/package/safari-devtools-mcp)

safari-devtools-mcp 允许您的编码代理（如Claude、Cursor、Copilot或Gemini）控制和检查macOS上的实时Safari浏览器。它充当模型上下文协议（MCP）服务器，让您的AI编码助手访问Safari DevTools进行调试、自动化和测试。

Chrome开发人员通过以下方式获得强大的AI调试 chrome开发工具mcp 谷歌。Safari开发人员应该有类似的东西——这个项目为Safari带来了同样的体验，具有匹配的工具名称和参数模式，这样你就可以在浏览器之间以最小的摩擦进行交换。

更新日志 | 贡献

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

为什么选择safari devtools mcp？

此项目使用 WebDriver 对于仅靠脚本无法提供的功能：

• 网络请求/响应正文捕获 --拦截带有完整标头、有效载荷和计时的fetch和XHR调用
• 通过可访问性树创建DOM快照 --在页面重新呈现后仍然存在的稳定元素UID，而不是脆弱的CSS选择器
• CSS计算样式检查 --从任何元素读取任何计算属性
• Cookie和存储管理 --读取、写入和删除Cookie、本地存储和会话存储
• 元素级截图 --捕捉单个元素，而不仅仅是整个视口
• 会话自动恢复 --检测死亡的SafariDriver会话并透明地重新连接

主要特点

• 浏览器调试：捕获控制台日志、检查网络请求和评估JavaScript——使用堆栈跟踪和完整的请求/响应详细信息。
• 可靠的自动化：使用具有稳定UID的辅助功能树快照，单击、键入、填写表单、拖放和按下键盘快捷键。
• 原生macOS集成：通过AppleScript进行选项卡管理，用于在窗口中列出、切换和控制Safari选项卡

需求

• macOS （Safari和SafariDriver是苹果独有的）
• Node.js 18+ （22+推荐）
• 游猎 启用远程自动化

Safari设置

1. 打开Safari浏览器>设置>高级>检查 “为web开发人员显示功能”
2. 开发菜单>检查 “允许远程自动化”
3. 授权SafariDriver：

   sudo safaridriver --enable

入门

标准MCP配置：

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

Claude Code

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

或添加到您的项目 .mcp.json 使用上面的标准配置。

Claude Desktop

将标准配置添加到 ~/Library/Application Support/Claude/claude_desktop_config.json.

Cursor

将标准配置添加到光标MCP设置中。

VS Code

将标准配置添加到 .vscode/mcp.json.

Copilot CLI

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

Gemini CLI

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

或者将标准配置添加到您的 ~/.gemini/settings.json.

Gemini Code Assist

将标准配置添加到您的 .gemini/settings.json 在项目根中。

JetBrains AI Assistant & Junie

将标准配置添加到您的 .junie/mcp.json 在项目根中。

Raycast

在Raycast中打开“安装MCP服务器”并填写：

• 命令: npx
• 参数: -y safari-devtools-mcp@latest

或者在打开命令之前复制上面的标准配置JSON——Raycast将自动填充表单。

Visual Studio

将标准配置添加到您的 .vs/mcp.json 在溶液根中。

Warp

将标准配置添加到Warp MCP设置文件中 ~/.warp/mcp.json.

From source

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

然后将您的MCP客户端指向构建的入口点：

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

您的第一个提示

导航至https://example.com，拍摄快照，并列出任何控制台错误。

苗条模式

使用 --slim 通过缩短工具描述来减少令牌使用。在处理上下文受限的模型或长时间对话时很有用：

{
  "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是苹果独有的——此服务器在Linux或Windows上无法运行。
• 无无头模式：Safari不支持无头操作。需要一个可见的浏览器窗口。
• 控制台预喷射间隙：在注入捕获脚本之前记录的控制台消息不会被捕获。
• 网络预注入间隙：注入前发出的网络请求通过Performance API进行回填，但细节有限（时间和大小，但没有标题或状态代码）。
• 仅PNG：Safari WebDriver仅支持PNG屏幕截图，不支持JPEG或WebP。无法进行完整页面捕获。
• AppleScript权限：选项卡管理功能需要macOS辅助功能权限 osascript.

学分

• chrome开发工具mcp 谷歌/ChromeDevTools——该项目所反映的灵感和界面标准。工具名称和模式有意兼容，因此您可以在Chrome和Safari之间无缝切换。
• safari mcp服务器 --我们在开发过程中研究的Safari MCP集成的现有技术。

许可证

麻省理工学院