Rediscover Safari developer features

Highlight

Safari 的开发者工具套件今年新增了 Simulator 集成、Vision Pro 无线调试、应用内 Web 内容检查（isInspectable），以及重新设计的 Feature Flags 设置，让 Web 开发者可以在 Mac 上完成跨平台的调试和测试工作。

核心内容

启用开发者功能

如果你第一次使用 Safari 的开发者功能，需要在 Safari 设置中启用（01:39）。打开 Safari > Settings > Advanced，勾选 “Show features for web developers”。

Web Inspector 的快速打开方式

Safari 重新设计了 Develop 菜单，让关键工具更容易找到（02:34）。打开 Web Inspector 有两种方式：

Develop 菜单：选择 “Show Web Inspector”
右键菜单：在页面任意位置 Control-click，选择 “Inspect Element”，会直接选中该元素并打开 Inspector

Element Selection 模式下，鼠标悬停会显示元素的选择器、布局信息（margin、shape outlines）和 accessibility roles（03:24）。

Responsive Design Mode

Responsive Design Mode 帮助测试页面在不同屏幕尺寸下的表现（04:56）。你可以：

拖拽视口边缘调整尺寸，页面内容会自动重排
输入精确的宽高值
修改像素比（pixel ratio）测试高分辨率屏幕

当视口高度超过窗口时，Safari 会自动缩放显示（比如显示为实际尺寸的 78%）。

从 Safari 直接打开 Simulator

今年新增的功能：可以直接从 Safari 打开 iOS、iPadOS 和 xrOS 模拟器来测试网页（06:52）。

操作路径：Develop > Open with Simulator。运行中的模拟器会排在列表顶部。如果模拟器未运行，系统会自动启动它。

模拟器中的 Safari 会展示与 macOS 版本不同的布局行为。比如同样的宽度下，iOS Safari 的视口表现会更大。你还可以测试 iOS 特有的交互，如平滑滚动和双击缩放。

模拟器中的页面同样可以用 Web Inspector 检查：Develop 菜单中找到对应的模拟器，选择要检查的页面即可（08:27）。

真机调试

iOS 和 iPadOS 设备可以通过数据线或无线网络进行调试（09:33）。

有线连接：

在设备上打开 Settings > Safari > Advanced，开启 Web Inspector
用数据线连接 Mac
在 Mac Safari 的 Develop 菜单中找到设备，选择要检查的页面

无线连接：

在 Develop 菜单中选择 “Connect via Network”
确保设备和 Mac 在同一网络
拔掉数据线，继续无线调试

Vision Pro 调试

xrOS 设备也支持从 Mac Safari 调试（11:24）。配对流程：

在 Vision Pro 上打开 Settings > Apps > Safari > Advanced，开启 Web Inspector
在 Settings > General > Remote Devices 中保持屏幕打开
在 Mac Safari 的 Develop 菜单中，从设备的子菜单选择 “Use for Development”
Vision Pro 会显示 6 位配对码，在 Mac 上输入
配对完成后即可无线调试

配对后，Element Selection 模式也支持 Vision Pro：在设备上注视目标元素，捏合手指即可选中（12:56）。

让 App 内的 Web 内容可检查

iOS 16.4 / macOS 13.3 / xrOS 起，App 可以主动让 WKWebView 和 JSContext 变得可检查（13:41）。

import WebKit
import JavaScriptCore

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)

if #available(macOS 13.3, iOS 16.4, *) {
    webView.isInspectable = true
}

let jsContext = JSContext()
jsContext?.name = "Context name"

if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
    jsContext?.isInspectable = true
}

关键点：

isInspectable = true 让 WKWebView 在 Safari 的 Develop 菜单中可见
JSContext 建议设置 name，方便在 Develop 菜单中区分多个上下文
这个 API 在 release 版本的 App 中也可用，方便生产环境调试

WebDriver 自动化测试

Safari 支持 WebDriver 进行跨浏览器自动化测试（14:34）。WebDriver 是一个本地 HTTP 服务器，接受自动化命令，支持查找元素、获取 accessibility role、执行 JavaScript、截图等操作。

配合 Selenium 的 Python 示例：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.safari.options import Options as SafariOptions

options = SafariOptions()
driver = webdriver.Safari(options=options)

driver.get("https://webkit.org/web-inspector/")

search_element = driver.find_element(by=By.ID, value="search")
search_element.send_keys("device")

assert(driver.find_element(by=By.LINK_TEXT, value="Device Settings"))

driver.quit()

关键点：

自动化窗口的标题栏会显示橙色，表示正在被自动化控制
测试可以在 iOS/iPadOS 模拟器和真机上运行
Safari 的 WebDriver 实现不需要浏览器特定的代码

Feature Flags

Safari 重新设计了 Feature Flags 设置（原 Experimental Features），用于预览未来的 Web 平台特性（17:01）。

Feature Flags 按主题组织（Animation、CSS、JavaScript、Media 等），支持搜索。每个特性有四种状态：

状态	说明	默认开关
Stable	已在 Safari 中默认启用，可手动关闭测试兼容性	开
Testable	早期实现，供反馈标准规范用	关
Preview	功能较完整，Safari Technology Preview 中默认开启	关
Developer	调整 WebKit 行为或重新启用废弃 API	视情况

关键点：

Safari Technology Preview 约每两周发布一次，提前体验最新特性
更新 Safari 后 Feature Flags 会自动重置为默认值
搜索功能可以快速找到相关特性（如搜索 “color” 找到所有颜色相关特性）

详细内容

高分辨率图片的处理

Responsive Design Mode 支持修改像素比，测试不同分辨率屏幕。Web 开发者有三种方式响应高分辨率屏幕（06:20）：

HTML srcset：

<img
  src="astronaut_1x.jpg"
  srcset="astronaut_2x.jpg 2x, astronaut_3x.jpg 3x"
/>

关键点：

src 是默认图片
srcset 列出不同分辨率的版本，浏览器根据设备像素比自动选择

CSS image-set：

.starfield {
  background-image: image-set("stars_1x.jpg" 1x, "stars_2x.jpg" 2x);
}

关键点：

image-set 可以在任何需要图片的地方使用
浏览器自动选择合适的分辨率版本

CSS resolution media query：

@media (min-resolution: 2dppx) {
  .divider-line {
    border: 0.5px solid grey;
  }
}

关键点：

dppx 表示每 CSS 像素对应的设备像素数
可以针对高分辨率屏幕调整任何样式，比如边框粗细

Web Inspector 的实用技巧

颜色拾取：在 Styles 侧边栏点击渐变预览，用颜色拾取器从屏幕任意位置取色（03:54）
撤销修改：Command-Z 可以撤销在 Web Inspector 中的样式修改（04:21）
元素选择：Element Selection 模式下，点击元素会自动在 Inspector 中选中它

核心启发

给 App 的 Web 视图加上调试开关

做什么：在 App 的调试设置页面加一个开关，开启后设置 WKWebView 的 isInspectable = true
为什么值得做：不需要连接 Xcode 就能用 Safari 检查 App 内的 Web 内容，QA 和设计师可以直接调试
怎么开始：在创建 WKWebView 后根据配置设置 webView.isInspectable = isDebugModeEnabled

用 WebDriver 做跨平台回归测试

做什么：用 Selenium + Safari WebDriver 写自动化测试，覆盖 macOS、iOS 模拟器和真机
为什么值得做：WebDriver 是跨浏览器标准，同一套测试脚本可以在 Safari、Chrome、Firefox 上运行
怎么开始：安装 Selenium，pip install selenium，用 webdriver.Safari() 创建驱动

用 Feature Flags 提前测试 CSS 新特性

做什么：在 Safari Technology Preview 中开启 CSS Masonry Layout 等 Preview 状态的特性，提前适配
为什么值得做：这些特性约两年后会在稳定版 Safari 中默认启用，提前测试可以确保网站兼容性
怎么开始：下载 Safari Technology Preview，在 Develop > Feature Flags 中搜索并开启目标特性

用 Responsive Design Mode 测试极端尺寸

做什么：在 Safari 的 Responsive Design Mode 中测试比屏幕还大的视口尺寸，确保布局不会崩坏
为什么值得做：用户可能在外接显示器上使用 Safari，或者缩放窗口，极端尺寸下的布局质量很重要
怎么开始：Develop > Enter Responsive Design Mode，输入超大宽高值，观察内容重排

关联 Session

What’s new in Web Inspector — Web Inspector 的新特性
Meet Safari for spatial computing — 空间计算中的 Safari
What’s new in CSS — CSS 新特性

Highlight

核心内容

启用开发者功能

Web Inspector 的快速打开方式

Responsive Design Mode

从 Safari 直接打开 Simulator

真机调试

Vision Pro 调试

让 App 内的 Web 内容可检查

WebDriver 自动化测试

Feature Flags

详细内容

高分辨率图片的处理

Web Inspector 的实用技巧

核心启发

关联 Session

评论