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

Hacker News 热门(buzzing.cc 中文翻译)·2026-07-03 17:59·46天前·coloneltcb
AI 导读

Safari Technology Preview 247 推出 Safari MCP 服务器,基于 Model Context Protocol,允许任何 MCP 兼容客户端连接 Safari 浏览器窗口。智能体可获取 DOM、网络请求、截图、控制台输出等信息,自主完成调试、性能分析、可访问性检查等任务。内置 browser_console_messagesscreenshotevaluate_javascriptlist_network_requests 等工具。开发者安装后启用“远程自动化与外部智能体”选项,即可通过命令接入,减少窗口切换。

Hacker News 热门(buzzing.cc 中文翻译)
精选
72AI 编辑部评分,满分 100

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

2026-07-03 17:59· 46天前· coloneltcb
AI 导读

Safari Technology Preview 247 推出 Safari MCP 服务器,基于 Model Context Protocol,允许任何 MCP 兼容客户端连接 Safari 浏览器窗口。智能体可获取 DOM、网络请求、截图、控制台输出等信息,自主完成调试、性能分析、可访问性检查等任务。内置 browser_console_messagesscreenshotevaluate_javascriptlist_network_requests 等工具。开发者安装后启用“远程自动化与外部智能体”选项,即可通过命令接入,减少窗口切换。

推荐理由

Safari 首次以官方身份推出 MCP 服务器,让 AI 编程助手能直接调试浏览器渲染,对前端开发者做兼容性测试和性能检查很实用,不过局限在 Safari 生态。

正文 · AI 翻译

面向 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 获取单个已记录网络请求的完整详情(标头、正文、时序)
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 技术预览版。安装完成后,请确保启用 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 浏览器的航班页面上发现了两个不同的错误。需要我把它们都修复吗?

你:

是的。这里还有其他可能给 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 错误报告。提交问题确实能带来改变。

来源:Hacker News 热门(buzzing.cc 中文翻译)· webkit.org