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

# 为 Web 开发者介绍 Safari MCP 服务器 来源：https://webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers/ 在 Safari Technology Preview 247（https://developer.apple.com/safari/technology-preview/）中，我们推出了 Safari MCP 服务器——一个面向 Web 开发者的模型上下文协议（Model Context Protocol）服务器，能让你的 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 Technology Preview（https://developer.apple.com/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 服务器后，尝试以下提示词之一： `` 在我的网站 Safari 中查找 bug `` `` 我的网站在 Safari 中的可访问性如何？ `` `` 查看我的网站在 Safari 中的性能表现 `` 虽然每个智能体的工作方式略有不同，但通常不需要明确告诉它使用 Safari MCP 服务器——它会自己判断。像上面这样简单的提示词就足以启动 MCP 功能。 以下是一个使用 Safari MCP 服务器的智能体对话示例： 你：收到一个 bug 报告——航班页面在 Safari 中出了问题。你能看看怎么回事吗？ 智能体：好的，让我看看。 智能体：我在 Safari 的航班页面发现了两个不同的 bug。需要我一起修复吗？ 你：是的。还有没有其他可能给 Safari 用户带来问题的地方？ 智能体：是的，还有两件值得注意的事。结果渐显动画静默失效，API 服务器启动日志也有问题。这两个要一起处理吗？ 你只需要一个最初的请求，借助 Safari MCP 服务器，你的智能体就可以在此基础上继续工作。 Safari MCP 服务器完全在你的本地机器上运行，不会自行发起任何网络调用。它也无法访问你在 Safari 中的个人信息（例如自动填充或其他浏览器活动）。当它捕获页面内容、截图或控制台日志时，这些数据会直接发送给你正在运行的智能体——而不是 Apple。这些数据后续如何处理，取决于你使用的智能体和模型。与任何授予浏览器访问权限的智能体一样，请只使用你信任的智能体。 ## 为什么我们要构建这个 构建 Web 的方式有很多种，包括使用 AI 和不使用 AI。如果 AI 是你工作流的一部分，我们相信这个工具能让它更高效。如果不是，那也没关系。 通过创建这个资源，我们希望帮助你的智能体理解浏览器中的表现和工作方式，从而让在 Safari 中进行测试和调试变得前所未有的简单。 如果你最终尝试了它，或者这是你第一次使用 MCP 服务器，请告诉我们你的想法。 你可以在以下平台找到我们：Saron Yitbarek 在 BlueSky（https://bsky.app/profile/saron.bsky.social）、Jen Simmons 在 Bluesky（https://bsky.app/profile/jensimmons.bsky.social）/ Mastodon（https://front-end.social/@jensimmons）、Jon Davis 在 Bluesky（https://bsky.app/profile/jondavis.bsky.social）/ Mastodon（https://mastodon.social/@jondavis）。如果遇到任何问题，请提交 WebKit 错误报告（https://bugs.webkit.org/）。提交问题确实会产生影响。