面向 Web 开发者的 Safari MCP 服务器

在 Safari Technology Preview 247 中，我们推出了 Safari MCP server——一个面向 Web 开发者的 Model Context Protocol 服务器，让你的 Web 开发和调试工作流更快、更强大。我们知道智能体正日益成为编码过程中不可或缺的一部分，而 Safari MCP server 通过将智能体连接到 Safari 浏览器窗口，让它能够了解你的代码在浏览器中实际渲染的效果。

任何兼容 MCP 的客户端都可以连接到 Safari MCP server。通过将你的智能体连接到 Safari 浏览器窗口，智能体可以模拟用户体验到的效果，从而获得更自主地调试所需的信息，例如访问 DOM、网络请求、截图和控制台输出。

它加快了你的调试过程，让你可以舒适地待在终端里，这意味着更少的窗口切换和输入提示词来调试代码的来回折腾。

使用场景

如果你为 Web 做开发，那你一定知道调试的那套来回折腾。通常流程是这样的：

你在浏览器中发现网站出了问题。你打开控制台去排查。你点进样式标签页。你看到了哪里坏了。你回到代码里去修复它。或者你截个图，把问题详细描述给智能体，让它替你修复。希望它做对了，bug 修好了，你可以继续往下走。

但当问题没被修复时，你又得再走一遍这个流程——浏览器。提示词。智能体。

一次又一次，直到你最终把 bug 消灭掉。

无论你使用哪种浏览器或工具，调试工作流都意味着大量的点击、工具切换和窗口跳转，才能完成一次修复，但事情本不必如此。如果你已经在开发工作流中使用智能体，Safari MCP server 能让你的调试更快、更高效。

Safari MCP server 让你的智能体能够自行完成更多调试和排障工作。以下是它能帮上忙的几个例子：

在 Safari 中进行 Web 开发。下次你在 Safari 中开发时，你将受益于升级后的工作流。你的智能体已经在帮你处理代码，现在它还能更进一步，查看你的代码在 Safari 中实际渲染的效果。

提升与 Safari 的兼容性。只在一个浏览器中测试，意味着会漏掉另一个浏览器中的潜在 bug，让那些用户获得糟糕的体验。借助 Safari MCP server，你的智能体可以在 Safari 中打开你的网站，检查计算样式、查看布局，并与你的预期进行对比，而无需切换窗口。

分析性能。看看你的网站哪些部分拖慢了速度。Safari MCP server 让你的智能体能够在页面上执行 JavaScript，以呈现性能指标，比如导航计时和资源加载时间，从而精准定位是什么拖慢了你的网站，并着手进行正确的修复。

检查无障碍性。 Safari MCP 服务器让你的智能体检查常见的无障碍问题，例如缺失的标签、不规范的 ARIA 属性以及对比度不足，从而帮你发现那些会影响用户的问题。

验证任意用户状态。 了解页面运行正常且外观符合预期。你的智能体可以检查表单状态、使用选择器查询元素、确认特定交互、展示结账流程的不同状态等等。减少花在这些手动检查上的时间，让智能体替你完成。

这些只是其中几个用例。无论你决定如何实现，Safari MCP 服务器都能帮助你的智能体为你做更多事，并减少网页开发中常常需要的反复来回。更顺畅的工作流意味着消灭更多 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 Technology Preview。安装完成后，请确保启用 Safari 设置 > 高级 > 显示网页开发者功能。然后前往 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 server，你的智能体就能自行接手。

Safari MCP server 完全在你的本地机器上运行，自身不会发起任何网络请求。它也无法访问你在 Safari 中的个人信息（例如自动填充或其他浏览器活动）。当它捕获页面内容、截图或控制台日志时，这些数据会直接发送给你正在运行的智能体——而不是发送给 Apple。此后这些数据会如何处理，取决于你使用的智能体和模型。正如对待任何你授予浏览器访问权限的智能体一样，只使用你信任的。

我们为什么构建这个

构建 Web 的方式有很多，用不用 AI 都可以。如果 AI 是你工作流的一部分，我们认为这个工具能帮助它变得更高效。如果不是，那也没关系。

通过创建这一资源，我们希望能让 Safari 中的测试和调试变得前所未有的简单，帮助你的智能体理解浏览器中事物的外观和运作方式。

如果你最终尝试了它，或者这是你第一次使用 MCP server，欢迎告诉我们你的想法。

在网上找到我们：Saron Yitbarek 在 BlueSky，Jen Simmons 在 Bluesky / Mastodon，Jon Davis 在 Bluesky / Mastodon。如果你遇到任何问题，请提交 WebKit bug report。提交问题确实会带来改变。