面向 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 错误报告。提交问题确实能带来改变。
Introducing the Safari MCP server for web developers
Jul 1, 2026
by Saron Yitbarek
In Safari Technology Preview 247, we’re introducing the Safari MCP server — a Model Context Protocol server for web developers that makes your web development and debugging workflow faster and more powerful. We know agents are increasingly integral to the coding process and the Safari MCP server gives your agent the ability to know how your code actually renders in the browser by connecting it to a Safari browser window.
Any MCP-compatible client can connect to the Safari MCP server. By connecting your agent to a Safari browser window, your agent can emulate what your users experience, giving it the information it needs to debug more autonomously, like access to the DOM, network requests, screenshots, and console output.
It speeds up your debugging process and lets you stay in the comfort of your terminal, which means fewer rounds of hopping windows and typing prompts to debug your code.
The use cases
If you build for the web, then you know about the debugging dance. It usually goes something like this:
You see something wrong with your site in the browser. You open the console to hunt it down. You click into the styles tab. You see what’s broken. You go back to your code to fix it. Or maybe you take a screenshot, detail the problem to your agent, and let it do the fixing for you. Hopefully it gets it right, the bug is fixed, and you can move on.
But when it isn’t fixed, you go through the workflow again — Browser. Prompt. Agent.
And again and again, until you finally squash the bug.
Regardless of the browser or tools you use, the debugging workflow is a lot of clicks, tools, and window hopping to make a single fix, but it doesn’t have to be that way. If you’re already using agents in your development workflow, the Safari MCP server makes your debugging faster and more efficient.
The Safari MCP server enables your agent to do more debugging and troubleshooting on its own. Here are just a few examples of what it can help with:
Web development in Safari. The next time you develop in Safari, you’ll benefit from an upgraded workflow. Your agent already helps you with your code, now it can do even more by checking out how your code actually renders in Safari.
Improve compatibility with Safari. Testing in just one browser means missing potential bugs in another, giving those users a subpar experience. With the Safari MCP server, your agent can open your site in Safari, inspect computed styles, check layout, and compare it against what you expect without switching windows.
Analyze performance. See what parts of your site are slowing things down. The Safari MCP server lets your agent evaluate JavaScript on the page to surface performance metrics, like navigation timing and resource load times, so it can pinpoint what’s slowing your site down and work on the right fix.
Check for accessibility. The Safari MCP server lets your agent check for common accessibility issues like missing labels, improper ARIA attributes, and poor contrast, so you can catch problems that impact your users.
Verify any user state. Know that the page is working and looking as it should. Your agent can check the state of the form, query an element using a selector, confirm specific interactions, show different states of a checkout flow, and more. Spend less time on these manual checks and empower the agent to do it for you.
These are just a few of the use cases. However you decide to implement it, the Safari MCP server helps your agent do more for you and reduce all the back and forth that web development often requires. An easier workflow means more bugs squashed, happier users, and a better product.
The tools
Here are the available tools and what they do:
| Tool | Description |
|---|---|
| browser_console_messages | Return buffered console logs for the current or specified tab |
| browser_dialogs | List and respond to browser dialogs (accept, dismiss, or input text for JS prompts) |
| close_tab | Close a browser tab by its handle |
| create_tab | Create a new browser tab, optionally loading a URL |
| evaluate_javascript | Execute JavaScript code within the page and return the result |
| get_network_request | Get full detail for a single recorded network request (headers, body, timing) |
| get_page_content | Extract text content of a page in various formats (markdown, HTML, JSON, etc.) |
| list_network_requests | List network request summaries (URL, method, status, timing) for the current tab |
| list_tabs | List all open browser tabs with their handles and URLs |
| navigate_to_url | Navigate to a URL and return the loaded page’s content |
| page_info | Get info about the current page: URL, title, and loading state |
| page_interactions | Perform DOM interactions in sequence: click, type, scroll, hover, keyPress, etc. |
| screenshot | Capture a screenshot of the current page as a PNG |
| set_emulated_media | Emulate a CSS media type (e.g. “print”) for responsive-design testing |
| set_viewport_size | Set the browser viewport size in CSS pixels |
| switch_tab | Switch to a different browser tab by its handle |
| wait_for_navigation | Wait for the current page to finish loading; returns final URL and title |
With the Safari MCP server, you no longer have to write the perfect prompt, carefully describing to your agent what you’re experiencing in the browser. You can give your agent the ability to find out for itself.
How to get started
First you’ll need to install Safari Technology Preview. Once installed, make sure you enable Safari Settings > Advanced > Show features for web developers. Then go to Safari Settings > Developer > Enable remote automation and external agents.
If you’re using Claude, you can use the following command in your terminal:
claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
If you’re using Codex, you can use the following command in your terminal:
codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
For other agents, you can put the following in your mcp.json or config.json :
"safari-mcp-stp": {
"command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
"args": ["--mcp"]
}
Note that while the above code names the server safari-mcp-stp, you can name it whatever you like, even just safari. Once you have the Safari MCP server installed, try one of the following prompts:
Find bugs on my site in Safari
How accessible is my site in Safari?
See how my website performs in Safari
While each agent works a little differently, it shouldn’t need to be told to use the Safari MCP server explicitly — it’ll figure it out on its own. Simple prompts like the ones above are enough to kickstart the MCP.
Here’s how a conversation with an agent using the Safari MCP server might go:
You:
Got a bug report — something’s broken in Safari on the flight page. Can you figure out what’s going on?
Agent:
Sure, let me take a look.
Agent:
I found two distinct bugs on the flight page in Safari. Want me to fix them both?
You:
Yes. Anything else here that might be causing problems for Safari users?
Agent:
Yes, two more things worth flagging. The results reveal animation is silently broken and the API server startup log is wrong. Should I tackle both as well?
All you need is an initial request to get started, and with the help of the Safari MCP server, your agent can take it from there.
The Safari MCP server runs entirely on your local machine and makes no network calls of its own. It also does not have access to your personal information in Safari (e.g. AutoFill or other browser activity). When it captures page content, screenshots, or console logs, that data goes directly to the agent you’re running — not to Apple. What happens to that data from there depends on the agent and model you’re using. As with any agent you give access to your browser, only use ones you trust.
Why we built this
There are many ways to build for the web, both with and without AI. If AI is a part of your workflow, we think this tool will help make it even more productive. And if it isn’t, that’s OK too.
By creating this resource, we hope to make it easier than ever to test and debug in Safari by helping your agent understand how things look and work in the browser.
If you end up giving it a try or if this is your first time using an MCP server, let us know what you think.
Find us online: Saron Yitbarek on BlueSky, Jen Simmons on Bluesky / Mastodon, and Jon Davis on Bluesky / Mastodon. If you run into any issues, file a WebKit bug report. Filing issues really does make a difference.