用途
该技能用于在 macOS 上使用 iOS Simulator 测试和调试 PWA（渐进式 Web 应用），以获得接近真实 iOS Safari 的体验。
前置条件
- 从 App Store 安装 Xcode
- 安装 Xcode Command Line Tools：
xcode-select --install - 启用 Safari 开发者菜单
快速开始
1. 启动模拟器
# 打开 Simulator 应用
open -a Simulator
或启动特定设备：
xcrun simctl boot "iPhone 15 Pro"
open -a Simulator
2. 打开 PWA
# 打开 localhost URL（模拟器可访问 Mac 的 localhost）
xcrun simctl openurl booted "http://localhost:3000"
# 或任意 URL
xcrun simctl openurl booted "https://your-pwa.com"
3. 使用 Safari Web Inspector 调试
- 启用 Safari 开发菜单：Safari → 设置 → 高级 → “显示网页开发者功能”
- 在 Mac 上打开 Safari
- 前往“开发”菜单 → 模拟器 → 选择你的网页
- 完整的 Web Inspector 打开，包含 Console、Elements、Network 等
simctl 命令参考
设备管理
# 列出所有可用模拟器
xcrun simctl list devices
# 仅列出已启动的模拟器
xcrun simctl list devices | grep Booted
# 启动模拟器
xcrun simctl boot "iPhone 15 Pro"
xcrun simctl boot <DEVICE-UUID>
# 关闭模拟器
xcrun simctl shutdown booted
xcrun simctl shutdown all
# 抹掉模拟器（恢复出厂设置）
xcrun simctl erase booted
# 删除不可用/旧模拟器
xcrun simctl delete unavailable
打开 URL
# 在已启动的模拟器中打开 URL
xcrun simctl openurl booted "http://localhost:3000"
# 在特定模拟器中打开 URL
xcrun simctl openurl "iPhone 15 Pro" "https://example.com"
截图与录制
# 截图
xcrun simctl io booted screenshot ~/Desktop/ios-screenshot.png
# 录制视频（Ctrl+C 停止）
xcrun simctl io booted recordVideo ~/Desktop/ios-recording.mp4
# 指定格式
xcrun simctl io booted recordVideo --type=mp4 ~/Desktop/recording.mp4
媒体与文件
# 向模拟器添加照片/视频
xcrun simctl addmedia booted ~/Desktop/test-image.png
xcrun simctl addmedia booted ~/Desktop/test-video.mp4
Safari Web Inspector 功能
通过“开发”菜单连接后：
- Console：查看 JS 日志、错误、Service Worker 日志
- Elements：检查 DOM，实时修改 CSS
- Network：监控请求，检查 Service Worker 缓存
- Sources：调试 JavaScript，设置断点
- Storage：检查 localStorage、IndexedDB、Cache Storage
- Service Workers：调试 Service Worker（在“开发”菜单中作为独立上下文显示）
调试 Service Worker
PWA Service Worker 会出现在 Safari 的“开发”菜单中：
- 在模拟器中打开 PWA
- Safari → 开发 → 模拟器 → 查找 “Service Worker” 条目
- 打开检查器，包含 Console、Sources、Network 标签页
注意：Service Worker 调试在模拟器中比在物理设备上效果更好。
无障碍测试
使用 Accessibility Inspector
- 打开 Xcode
- Xcode → Open Developer Tool → Accessibility Inspector
- 从设备下拉菜单中选择模拟器
- 悬停在元素上查看无障碍信息
- 运行 Audit 查找无障碍问题
命令行无障碍快照
# 获取无障碍层级（需要运行中的应用）
xcrun simctl ui booted accessibility
PWA 特定测试
添加到主屏幕（手动）
- 在模拟器的 Safari 中打开 PWA URL
- 点击分享按钮（底部栏）
- 选择“添加到主屏幕”
- PWA 作为独立应用安装
测试已安装的 PWA
- 已安装的 PWA 在 Web.app 引擎中运行（与真实设备相同）
- 通过“开发”菜单作为独立 Web 上下文访问
- 测试
display-mode: standalone媒体查询 - 验证启动画面、图标、主题颜色
Manifest 验证
检查 manifest 是否正确加载：
- 打开 Web Inspector → Application 标签页（如可用）或 Network 标签页
- 查找 manifest.json 请求
- 验证所有图标、theme_color、display 模式
多设备测试脚本
运行 scripts/multi-device-test.sh 在多种设备尺寸上测试：
./scripts/multi-device-test.sh "http://localhost:3000"
模拟器常用键盘快捷键
| 快捷键 | 操作 |
|---|---|
| ⌘ + Shift + H | 回到主屏幕 |
| ⌘ + Shift + H (x2) | 应用切换器 |
| ⌘ + → / ⌘ + ← | 旋转设备 |
| ⌘ + S | 截图 |
| ⌘ + R | 录制视频 |
| ⌘ + K | 切换键盘 |
故障排除
Safari 开发菜单中显示“无可检查的应用”
- 确保模拟器的 Safari 中已打开网页
- 重启 Mac 上的 Safari
- 重启模拟器
模拟器未出现在开发菜单中
- 退出 Safari 和模拟器
- 先重新打开模拟器，再打开 Safari
localhost 无法访问
- 使用
http://localhost:PORT（模拟器共享 Mac 的网络栈） - 尝试
http://127.0.0.1:PORT作为替代
Service Worker 未更新
- 在模拟器中清除 Safari 缓存：设置 → Safari → 清除历史记录与网站数据
- 或抹掉模拟器：
xcrun simctl erase booted