Safari MCP
官方Safari MCP 服务器通过将您的代理连接到 Safari 浏览器窗口,使其能够了解代码在浏览器中的实际渲染效果。
你可以用 Safari MCP 做什么?
- 检查实时页面结构 — 让您的助手通过拉取 Safari 标签页当前的 DOM 或文本内容,以了解页面的实际渲染情况。
- 调试控制台和网络问题 — 请助手检索缓冲的控制台日志,或列出网络请求摘要,以诊断错误。
- 自动化浏览器交互 — 指示助手通过点击、输入或滚动页面来测试工作流程或复现 bug。
- 捕获视觉证据 — 使用
screenshot请求当前页面的 PNG 截图,以准确查看用户所见内容。 - 测试响应式布局 — 让助手模拟“打印”等 CSS 媒体类型,或调整视口大小,以验证不同断点下的设计效果。
- 评估自定义 JavaScript — 指示助手在页面上运行任意 JS,以检查状态或计算性能指标。
文档
更新: 在 Safari 27 和 Safari Technology Preview 247 中,我们推出了 Safari MCP 服务器——一个面向 Web 开发者的模型上下文协议服务器,让您的 Web 开发和调试工作流程更快、更强大。我们知道智能体在编码过程中越来越不可或缺,而 Safari MCP 服务器通过将您的智能体连接到 Safari 浏览器窗口,使其能够了解您的代码在浏览器中的实际渲染效果。
任何兼容 MCP 的客户端都可以连接到 Safari MCP 服务器。通过将您的智能体连接到 Safari 浏览器窗口,您的智能体可以模拟用户的体验,从而获得更自主调试所需的信息,例如 DOM 访问权限、网络请求、截图和控制台输出。
它可以加快您的调试过程,让您无需离开终端,从而减少在窗口之间来回切换和输入提示词来调试代码的麻烦。
使用场景
如果您为 Web 开发,那么您一定了解调试的“舞蹈”。通常是这样进行的:
您在浏览器中发现网站出现了一些问题。您打开控制台查找问题。您点击样式标签。您看到问题所在。您回到代码中修复它。或者,您截取屏幕截图,向智能体详细描述问题,然后让它为您修复。希望它能正确修复,bug 被解决,然后您可以继续。
但当问题没有被修复时,您会再次经历这个工作流程——浏览器。提示词。智能体。
一次又一次,直到您最终解决这个 bug。
无论您使用哪种浏览器或工具,调试工作流程都需要大量的点击、工具和窗口切换才能完成一次修复,但情况不必如此。如果您已经在开发工作流程中使用智能体,Safari MCP 服务器将使您的调试更快、更高效。
Safari MCP 服务器使您的智能体能够自主完成更多调试和故障排除工作。以下只是它可以帮助您的一些示例:
在 Safari 中进行 Web 开发。 下次您在 Safari 中开发时,将受益于升级后的工作流程。您的智能体已经在帮助您处理代码,现在它可以通过检查您的代码在 Safari 中的实际渲染效果来做更多事情。
提高与 Safari 的兼容性。 仅在一种浏览器中测试意味着会遗漏其他浏览器中可能存在的 bug,从而给这些用户带来较差的体验。借助 Safari MCP 服务器,您的智能体可以在 Safari 中打开您的网站,检查计算样式、检查布局,并将其与您的预期进行比较,而无需切换窗口。
分析性能。 查看您网站的哪些部分拖慢了速度。Safari MCP 服务器允许您的智能体在页面上执行 JavaScript,以获取性能指标,例如导航计时和资源加载时间,从而精确定位拖慢您网站的因素并制定正确的修复方案。
检查可访问性。 Safari MCP 服务器允许您的智能体检查常见的可访问性问题,例如缺少标签、ARIA 属性不正确和对比度不佳,以便您发现影响用户的问题。
验证任何用户状态。 确保页面按预期工作并显示正确。您的智能体可以检查表单状态、使用选择器查询元素、确认特定交互、显示结账流程的不同状态等等。减少在这些手动检查上花费的时间,让智能体为您完成这些工作。
这些只是其中的一些使用场景。无论您决定如何实施,Safari MCP 服务器都能帮助您的智能体为您做更多事情,并减少 Web 开发中经常需要的来回沟通。更轻松的工作流程意味着更多 bug 被解决、更满意的用户和更好的产品。
工具
以下是可用的工具及其功能:
| 工具 | 描述 |
|---|---|
| browser_console_messages | 返回当前或指定标签页的缓冲控制台日志 |
| browser_dialogs | 列出并响应浏览器对话框(接受、取消或为 JS 提示输入文本) |
| close_tab | 通过句柄关闭浏览器标签页 |
| create_tab | 创建新的浏览器标签页,可选择加载 URL |
| evaluate_javascript | 在页面内执行 JavaScript 代码并返回结果 |
| get_network_request | 获取单个记录的网络请求的完整详细信息(标头、正文、计时) |
| get_page_content | 以各种格式(Markdown、HTML、JSON 等)提取页面文本内容 |
| list_network_requests | 列出当前标签页的网络请求摘要(URL、方法、状态、计时) |
| list_tabs | 列出所有打开的浏览器标签页及其句柄和 URL |
| navigate_to_url | 导航到 URL 并返回加载页面的内容 |
| page_info | 获取当前页面的信息:URL、标题和加载状态 |
| page_interactions | 按顺序执行 DOM 交互:点击、输入、滚动、悬停、按键等 |
| screenshot | 将当前页面截图捕获为 PNG |
| set_emulated_media | 模拟 CSS 媒体类型(例如“print”)以进行响应式设计测试 |
| set_viewport_size | 以 CSS 像素为单位设置浏览器视口大小 |
| switch_tab | 通过句柄切换到不同的浏览器标签页 |
| wait_for_navigation | 等待当前页面完成加载;返回最终 URL 和标题 |
借助 Safari MCP 服务器,您不再需要编写完美的提示词,仔细向智能体描述您在浏览器中遇到的情况。您可以让智能体自行了解情况。
如何开始
Safari 27
首先,您需要安装 Safari 27。安装后,请确保启用 Web 开发者功能和远程自动化。要启用 Web 开发者功能,请选择 Safari > 设置 > 高级 > 勾选“为 Web 开发者显示功能”复选框。然后转到 Safari > 设置 > 开发者 > 勾选“允许远程自动化和外部智能体”。
如果您使用 Claude,可以在终端中使用以下命令:
claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp
如果您使用 Codex,可以在终端中使用以下命令:
codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp
对于其他智能体,您可以将以下内容放入 mcp.json 或 config.json 文件中。
{
"mcpServers": {
"safari-mcp": {
"command": "/usr/bin/safaridriver",
"args": ["--mcp"]
}
}
}
Safari Technology Preview
首先,您需要安装 Safari Technology Preview。安装后,请确保启用 Safari 设置 > 高级 > 为 Web 开发者显示功能。然后转到 Safari 设置 > 开发者 > 启用远程自动化和外部智能体。
如果您使用 Claude,可以在终端中使用以下命令:
claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
如果您使用 Codex,可以在终端中使用以下命令:
codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
对于其他智能体,您可以将以下内容放入 mcp.json 或 config.json:
"safari-mcp-stp": {
"command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
"args": ["--mcp"]
}
请注意,虽然上述代码将服务器命名为 safari-mcp-stp,但您可以随意命名,甚至可以命名为 safari。安装 Safari MCP 服务器后,请尝试以下提示词之一:
Find bugs on my site in Safari
How accessible is my site in Safari?
See how my website performs in Safari
虽然每个智能体的工作方式略有不同,但它不需要被明确告知使用 Safari MCP 服务器——它会自行判断。像上面这样的简单提示词就足以启动 MCP。
以下是使用 Safari MCP 服务器的智能体对话可能的样子:
您:收到一个 bug 报告——Safari 中航班页面有些问题。您能弄清楚发生了什么吗?
智能体:好的,让我看一下。
智能体:我在 Safari 的航班页面上发现了两个不同的 bug。需要我同时修复它们吗?
您:是的。这里还有其他可能给 Safari 用户带来问题的内容吗?
智能体:是的,还有两件事值得标记。结果展示动画静默失效了,API 服务器启动日志也不正确。我也应该一起处理吗?
您只需要一个初始请求即可开始,在 Safari MCP 服务器的帮助下,您的智能体可以自行处理后续工作。
Safari MCP 服务器完全在您的本地机器上运行,本身不会进行任何网络调用。它也无法访问您在 Safari 中的个人信息(例如自动填充或其他浏览器活动)。当它捕获页面内容、截图或控制台日志时,这些数据会直接发送给您正在运行的智能体——而不是发送给 Apple。这些数据之后如何处理取决于您使用的智能体和模型。与任何您授予浏览器访问权限的智能体一样,请只使用您信任的智能体。
我们为什么构建这个
构建 Web 的方式有很多种,无论是否使用 AI。如果 AI 是您工作流程的一部分,我们认为这个工具将帮助您提高生产力。如果不是,那也没关系。
通过创建此资源,我们希望让在 Safari 中测试和调试变得比以往更容易,帮助您的智能体了解事物在浏览器中的外观和工作方式。
如果您最终尝试了它,或者这是您第一次使用 MCP 服务器,请告诉我们您的想法。
在线找到我们:Saron Yitbarek 在 Bluesky,Jen Simmons 在 Bluesky / Mastodon,Jon Davis 在 Bluesky / Mastodon。如果您遇到任何问题,请提交 WebKit bug 报告。提交问题确实会产生影响。