重新发现 Safari 开发者功能

一句话判断

Safari 的开发者工具今年新增了模拟器快速跳转、WebDriver 自动化测试和重新设计的功能标志设置。

这场 Session 讲了什么

Safari 的开发者功能今年获得了多项更新。Develop 菜单被重新设计，更容易找到关键工具。Web Inspector 支持直接从页面上下文菜单通过 “Inspect Element” 打开，并自动选中元素。

Responsive Design Mode 进行了调整，让你更专注于内容布局的响应性。你可以测试比窗口甚至屏幕更大的 viewport 尺寸，Safari 会自动缩放以显示完整页面。还支持修改像素比来测试不同显示器的效果。

最重要的新功能是 Simulator 集成。你可以直接从 Safari 打开 iOS、iPadOS 和 xrOS 模拟器来测试网页。模拟器中的 Safari 会展示与 macOS 版本不同的布局行为（如 iOS 上更大的视口），你还可以测试滑动和双击缩放等 iOS 特有交互。模拟器中的页面同样可以用 Web Inspector 检查。

值得深挖的点

xrOS 模拟器支持是一个值得关注的更新。开发者可以在没有设备的情况下测试网页在空间计算平台上的表现。如果尚未安装 xrOS 模拟器，菜单会提供安装指引。

功能标志（Feature Flags）设置也被重新设计，让开发者可以方便地预览和测试未来的 Web 平台特性。这对于早期采用新 Web 标准的开发者非常有用。

代码片段

Safari 开发者工具使用流程：

1. 启用开发者功能
   Safari → 设置 → 高级 → 显示开发者功能

2. Web Inspector
   - Develop 菜单 → Show Web Inspector
   - 或在页面右键 → Inspect Element

3. Responsive Design Mode
   - Develop → Enter Responsive Design Mode
   - 拖拽边缘调整 viewport 大小
   - 修改像素比测试不同显示效果

4. Simulator 集成
   - Open with Simulator → 选择已安装的模拟器
   - 支持 iOS、iPadOS、xrOS
   - 模拟器中的页面可用 Web Inspector 检查

5. WebDriver 自动化测试
   - 跨浏览器、跨平台的自动化测试
   - 参考 WebDriver 文档了解配置

最佳实践

• 使用 Simulator 集成在无需真机的情况下测试 iOS/xrOS 表现
• 利用 Responsive Design Mode 测试各种屏幕尺寸和像素比
• 通过功能标志预览即将推出的 Web 平台特性
• 使用元素选择工具查看选择器、布局和辅助功能信息
• Command-Z 可以在 Web Inspector 中撤销样式修改

还有什么值得关注

• Web Inspector 的渐变编辑器和取色器功能
• WebDriver 支持跨浏览器自动化测试
• xrOS 模拟器的安装需要额外步骤
• 参考 “What’s new in Web Inspector” 了解更多细节