面向 Web 开发者的 Safari MCP 服务器介绍Introducing the Safari MCP Server for Web Developers

在 Safari Technology Preview 247 中，我们引入了 Safari MCP server —— 一款面向 Web 开发者的 Model Context Protocol 服务器，它能让你的 Web 开发与调试工作流变得更快捷、更强大。我们深知智能体（agents）在编码过程中的作用日益重要，而 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 server 让你的智能体能够检查常见的无障碍访问问题，如缺失标签、不正确的 ARIA 属性以及对比度不佳等，从而帮你发现影响用户体验的问题。

验证各种用户状态。确保页面的运行和显示符合预期。你的智能体可以检查表单的状态、使用选择器查询元素、确认特定的交互行为、展示结账流程的不同状态等等。减少你在这些手动检查上花费的时间，把这些工作交给智能体代劳。

这些只是少数几个用例。无论您决定如何使用它，Safari MCP server 都能帮助您的智能体为您完成更多工作，并减少 Web 开发中常见的反复沟通。更顺畅的工作流意味着能修复更多 Bug、让用户更满意，从而打造出更优秀的产品。

工具

以下是可用的工具及其功能：

有了 Safari MCP server，您不再需要编写完美的提示词，去向智能体仔细描述您在浏览器中遇到的情况。您可以直接赋予智能体自主查明问题的能力。

如何开始

首先，您需要安装 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 server 后，请尝试以下提示词之一：

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

虽然每个智能体的工作方式略有不同，但您无需明确指示它去使用 Safari MCP server——它会自行判断。像上面那样简单的提示词就足以启动 MCP。

以下是一个使用 Safari MCP server 的智能体对话可能呈现的流程：

您：收到了一份 Bug 报告——Safari 上的航班页面有些问题。你能查清楚是怎么回事吗？

智能体：没问题，我来看看。

智能体：我在 Safari 的航班页面上发现了两个不同的 Bug。需要我把它们都修复吗？

您：好的。这里还有其他可能会给 Safari 用户带来问题的地方吗？

智能体：是的，还有两件事值得一提。结果显示动画静默失效了，而且 API 服务器的启动日志也有误。需要我也一并处理吗？

您只需要一个初始请求就可以开始，在 Safari MCP server 的帮助下，您的智能体能够自行处理后续的工作。

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

我们为什么要开发这个工具

构建 Web 应用的方法有很多种，无论是否使用 AI。如果 AI 已经是您工作流的一部分，我们认为这个工具将帮助您进一步提升效率。如果不是，那也没关系。

通过创建这项资源，我们希望帮助您的智能体了解浏览器中网页的呈现方式与运作机制，从而让在 Safari 中进行测试和调试变得前所未有地简单。

如果您打算尝试一下，或者这是您第一次使用 MCP server，请告诉我们您的想法。

在线联系我们：BlueSky 上的 Saron Yitbarek，Bluesky / Mastodon 上的 Jen Simmons，以及 Bluesky / Mastodon 上的 Jon Davis。如果您遇到任何问题，请提交 WebKit Bug 报告。提交问题真的非常有帮助。