Safari 27 上线 MCP 服务器：让 codex、Claude Code 直接接管浏览器窗口

WebKit 官方博客发布了 Safari 27.0 的完整更新说明。这一版最受关注的新东西是 Safari MCP 服务器——它让 AI 编码代理直接接管浏览器窗口，看你写的代码到底渲染成了什么样。

MCP 是什么，Safari 拿它干什么

MCP（Model Context Protocol）是给 AI 代理提供工具接口的一套协议。Safari 27.0 内置的 MCP 服务器，做的事情是让 Claude Code、Codex 或你选用的其他代理拿到浏览器窗口的控制权。

苹果官方对这项能力的描述是：

「你在用编码代理开发网站吗？Safari 27.0 里可用的 Safari MCP 服务器能让你的工作流更快、更强。把浏览器窗口的控制权交给 Claude Code、Codex 或你选的代理，让它看到你的代码渲染出来是什么样。Safari MCP 提供对 DOM、网络请求、截图和控制台输出的访问。你的代理能自己做得更多，你则更少在窗口之间来回切换、更少把截图往终端里拖、更少打字描述哪里出了问题。」

按苹果列出的清单，代理可以做的事包括：看代码在 Safari 里的渲染效果、验证表单与结账流程等用户状态、把计算样式和布局与其他浏览器对比、检测缺少标签或 ARIA 属性错误或对比度不足这类无障碍问题、用导航时序和资源加载时间分析性能。

隐私设计值得单独提一句

苹果强调了三件事：MCP 服务器完全跑在本地机器上、自身不发起任何网络请求、无法访问 Safari 里你的个人信息，捕获到的数据直接交给你的代理而不是苹果。

这三点在 AI 工具语境里很关键。浏览器里装着登录状态、Cookie 和各类账号信息，让一个自动化代理接管浏览器窗口，默认就是要面对权限边界的问题。苹果的处理方式是把数据留在本地链路里，不做云端中转。

怎么打开

开启路径分两步。第一步先在 Safari 里打开「设置」→「高级」→ 勾选「显示网页开发者功能」，只有这样才会出现开发者面板。下面是这两步在 Safari 里的实际位置。

第二步进入「设置」→「开发者」，勾选「允许远程自动化和外部代理」。

WebKit 博客里同时给了把 Claude Code、Codex 等代理连上 Safari 的具体命令。

Safari 27.0 的其他变化

• 修复数量：这一版修掉近 850 个问题，而几个月前的 WWDC 上苹果公布的数字还是 525 个。修复涉及无障碍、CSS、编码、字体、表单、MathML、网络、WebRTC 等多个方向
• 沉浸式环境：新增支持，开发者可以在 visionOS 里提供这类体验
• HTML <model> 元素：扩展到 iOS、iPadOS 和 macOS，网页可以直接内嵌可交互的 3D 模型，用法和图片、视频类似
• 滚动锚定（Scroll Anchoring）：解决网页在你阅读时因为上方图片加载完成而发生跳动的问题
• Web Inspector 改进：包括行内对比度信息、更清晰的跳转链路展示、改进的布局调试

此外还有 WebAssembly、WebGPU、JavaScript、CSS、WebRTC、媒体播放、Web 扩展、WKWebView 和 Service Worker 方面的更新，完整清单在 WebKit 博客原文里。

对国内开发者意味着什么

MCP 这条路的意义在于把「看一眼效果」这件事从人工操作变成了代理可以自己完成的动作。过去让 AI 改前端代码，验证环节总需要人去截图、复制报错、再描述一遍现象；现在代理可以自己取 DOM、拉控制台输出、跑无障碍检查。

需要注意的是，MCP 服务器连的是 Safari，不是 Chromium。如果你面向的是国内大量基于 Chromium 内核的浏览器，Safari 里的渲染结果只能作为参考，跨浏览器差异反而要靠它提供的「和其他浏览器对比」能力来验证。

滚动锚定这个改动，普通用户也能受益

这次更新里有一项对开发者不起眼、对所有人都实用的改动：滚动锚定。它的作用是阻止网页在你阅读时自己跳动——最常见的场景是，你正读到一段内容，上方一张大图加载完成，整页内容被推下去，阅读位置丢失。

这个问题在长图文、商品详情页、新闻列表页里非常普遍。此前各家浏览器解决得不彻底，主要是因为图片尺寸未知时浏览器无法预留空间。滚动锚定是在渲染层做位置补偿，从根上处理。

如果经常在手机上读长文，这一项的体验改善会比任何 AI 功能都更直观。

HTML <model> 元素扩展到全平台

另一个值得留意的变化是 HTML <model> 元素扩展到 iOS、iPadOS 和 macOS。它让网页可以内嵌可交互的 3D 模型，用法和插入图片、视频一样简单。

此前在网页上展示 3D 模型，通常要引入体积不小的三维库，或者依赖平台的专有方案。变成标准 HTML 元素之后，电商的商品 360 度展示、产品说明、教育内容的实现成本会明显下降。对普通用户来说，最直接的结果是以后会有更多网页能直接转着看产品。