Safari MCP 服务器登场：加速 Web 开发调试，多场景应用提升效率！
WebKit 导航
下载
下载
特性状态
- CSS 特性
- 标准立场
文档
- Web 检查器
- 跟踪防护
政策
- 项目目标
- 漏洞优先级排序
- 漏洞报告指南
- 代码风格指南
- 提交与审核政策
- 特性政策
- 安全政策
- 跟踪防护政策
贡献
- 入门指南
- 贡献代码
- 测试贡献
- 如何报告漏洞
- GitHub 仓库
博客
- 新闻文章
- CSS 文章
- 贡献文章
- 隐私文章
- 性能文章
- JavaScript 文章
- 标准文章
- Web 检查器文章
- Safari 技术预览版文章
为 Web 开发者引入 Safari MCP 服务器
在 Safari 技术预览版 247 中，将引入面向 Web 开发者的 Safari MCP 服务器。这是一款模型上下文协议（Model Context Protocol，MCP）服务器，能让 Web 开发和调试工作流变得更快、更强大。智能代理在编码过程中愈发重要，而 Safari MCP 服务器通过将代理连接到 Safari 浏览器窗口，使其能够了解代码在浏览器中的实际渲染情况。
任何兼容 MCP 的客户端都可连接到 Safari MCP 服务器。连接后，代理能模拟用户体验，获取自主调试所需信息，如访问 DOM、网络请求、截图和控制台输出等。这不仅加快了调试过程，还让开发者能在终端中操作，减少了在不同窗口间切换和输入调试指令的麻烦。
使用场景
Web 开发中，调试工作十分繁琐。通常是在浏览器中发现网站问题，打开控制台查找，点击样式标签查看问题，再回到代码中修复；或者截取屏幕，向代理详细描述问题让其修复。若修复不成功，就得反复尝试“浏览器 - 指令 - 代理”流程。无论用何种浏览器或工具，调试工作流都需大量点击、切换工具和窗口。
但有了 Safari MCP 服务器，若开发工作流中已使用智能代理，调试将变得更快、更高效。它能让代理自主完成更多调试和故障排除工作，具体应用场景如下：
- Safari 中的 Web 开发：在 Safari 中开发时，将拥有更优化的工作流程。代理不仅能协助编写代码，还能查看代码在 Safari 中的实际渲染效果。
- 提高与 Safari 的兼容性：只在一种浏览器中测试，可能忽略其他浏览器的潜在问题，影响用户体验。借助 Safari MCP 服务器，代理可在 Safari 中打开网站，检查计算样式、布局，并与预期效果对比，无需切换窗口。
- 性能分析：可找出网站中影响性能的部分。Safari MCP 服务器允许代理评估页面上的 JavaScript，获取性能指标，如导航时间和资源加载时间，从而定位问题并修复。
- 可访问性检查：代理能检查常见的可访问性问题，如缺少标签、不正确的 ARIA 属性和对比度不佳等，帮助发现影响用户的问题。
- 验证用户状态：能确保页面按预期工作和显示。代理可检查表单状态、使用选择器查询元素、确认特定交互、展示结账流程的不同状态等，减少手动检查时间。
无论如何应用，Safari MCP 服务器都能让代理做更多事，减少 Web 开发中常见的来回切换操作，带来更轻松的工作流，解决更多漏洞，让用户更满意，产品更优质。
可用工具
Safari MCP 服务器提供的工具及其功能如下：
| 工具 | 描述 |
|---|---|
| browser_console_messages | 返回当前或指定标签页的缓冲控制台日志 |
| browser_dialogs | 列出并响应浏览器对话框（接受、关闭或为 JavaScript 提示输入文本） |
| 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 媒体类型（如“打印”）以进行响应式设计测试 |
| set_viewport_size | 以 CSS 像素为单位设置浏览器视口大小 |
| switch_tab | 通过句柄切换到不同的浏览器标签页 |
| wait_for_navigation | 等待当前页面加载完成；返回最终 URL 和标题 |
有了 Safari MCP 服务器，无需再编写完美指令向代理详细描述浏览器问题，代理可自行探索和解决问题。
入门指南
首先，需安装 Safari 技术预览版。安装完成后，要在 Safari 设置的“高级”选项中开启“显示 Web 开发者功能”，并在“开发者”选项中启用“远程自动化”和“外部代理”。
若使用 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 中航班页面有问题，能帮忙排查一下吗？
代理：当然，让我看看。
代理：我在 Safari 的航班页面上发现了两个不同的漏洞，要我都修复吗？
你：好的。还有其他可能影响 Safari 用户的问题吗？
代理：有，还有两个问题值得关注。结果显示动画无声无息地出了问题，API 服务器启动日志也有误。要我一起处理吗？
只需发起初始请求，借助 Safari MCP 服务器，代理就能自行处理后续问题。
Safari MCP 服务器完全在本地机器上运行，不会自行发起网络调用，也无法访问 Safari 中的个人信息（如自动填充或其他浏览器活动）。捕获页面内容、截图或控制台日志时，数据会直接传输到正在使用的代理，而非苹果公司。数据的后续处理取决于使用的代理和模型。与任何可访问浏览器的代理一样，仅使用信任的代理。
开发初衷
构建 Web 应用有多种方式，无论是否使用人工智能。若人工智能是工作流程的一部分，这个工具将提高工作效率；若还未使用，也无妨。
创建这个资源的目的是，通过帮助代理了解代码在浏览器中的实际呈现和运行情况，让在 Safari 中进行测试和调试变得更加容易。
若尝试使用这个工具，或者是首次使用 MCP 服务器，可反馈感受。可在以下平台找到相关人员：Saron Yitbarek 在 BlueSky；Jen Simmons 在 Bluesky / Mastodon；Jon Davis 在 BlueSky / Mastodon。若遇到问题，请提交 WebKit 漏洞报告，提交问题反馈很有帮助。
上一篇：Safari 技术预览版 247 发布说明
- @webkit@front-end.social
- 网站地图
- 隐私政策
- WebKit 许可
- WebKit 和 WebKit 标志是苹果公司的商标