面向 Web 开发者的 Safari MCP 服务器
阅读原文· webkit.orgSafari 首次以官方身份推出 MCP 服务器,让 AI 编程助手能直接调试浏览器渲染,对前端开发者做兼容性测试和性能检查很实用,不过局限在 Safari 生态。
Safari Technology Preview 247 推出 Safari MCP 服务器,基于 Model Context Protocol,允许任何 MCP 兼容客户端连接 Safari 浏览器窗口。智能体可获取 DOM、网络请求、截图、控制台输出等信息,自主完成调试、性能分析、可访问性检查等任务。内置 browser_console_messages、screenshot、evaluate_javascript、list_network_requests 等工具。开发者安装后启用“远程自动化与外部智能体”选项,即可通过命令接入,减少窗口切换。
为 Web 开发者推出 Safari MCP 服务器
2026 年 7 月 1 日
作者:Saron Yitbarek
在 Safari Technology Preview 247 中,我们推出了 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 | 获取单个记录的网络请求的完整详情(头部、正文、时序) |
| 获取页面内容 | 以多种格式(Markdown、HTML、JSON 等)提取页面的文本内容 |
| 列出网络请求 | 列出当前标签页的网络请求摘要(URL、方法、状态、时序) |
| 列出标签页 | 列出所有打开的浏览器标签页及其句柄和 URL |
| 导航到 URL | 导航到指定 URL 并返回加载后的页面内容 |
| 页面信息 | 获取当前页面的信息:URL、标题和加载状态 |
| 页面交互 | 按顺序执行 DOM 交互:点击、输入、滚动、悬停、按键等 |
| 截图 | 将当前页面截取为 PNG 格式的截图 |
| 设置模拟媒体类型 | 模拟 CSS 媒体类型(例如“打印”),用于响应式设计测试 |
| 设置视口大小 | 以 CSS 像素为单位设置浏览器视口大小 |
| 切换标签页 | 通过句柄切换到不同的浏览器标签页 |
| 等待导航完成 | 等待当前页面完成加载;返回最终 URL 和标题 |
有了 Safari MCP 服务器,你不再需要编写完美的提示词,仔细向智能体描述你在浏览器中看到的内容。你可以让智能体自己具备发现能力。
如何开始
首先,你需要安装 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 服务器的智能体与你的对话示例:
你只需要发出初始请求就能开始,借助 Safari MCP 服务器,你的智能体就能继续推进后续工作。
Safari MCP 服务器完全在你的本地机器上运行,不会主动发起任何网络调用。它也无法访问你在 Safari 中的个人信息(例如自动填充或其他浏览器活动)。当它捕获页面内容、截图或控制台日志时,这些数据会直接发送给你正在运行的智能体——而非苹果公司。这些数据后续如何处理,取决于你使用的智能体和模型。与任何允许访问你浏览器的智能体一样,请只使用你信任的。
我们为何构建这个工具
构建 Web 应用的方式有很多,既包括有 AI 的,也包括没有 AI 的。如果 AI 是你工作流程的一部分,我们认为这个工具将帮助它变得更高效。如果不是,那也没关系。
通过创建这个资源,我们希望帮助你的智能体更好地理解内容在浏览器中的呈现方式和工作原理,从而让在 Safari 中进行测试和调试比以往任何时候都更简单。
如果你最终尝试使用它,或者这是你第一次使用 MCP 服务器,请告诉我们你的想法。
在社交平台上找到我们:Saron Yitbarek 在 BlueSky,Jen Simmons 在 Bluesky / Mastodon,Jon Davis 在 Bluesky / Mastodon。如果遇到任何问题,请提交 WebKit 缺陷报告。提交问题确实能带来改变。