2026 前端連調 · Safari
Safari Web Inspector リモート実戦：
iOS 実機とデスクトップの手順・FAQ
2026.03.25
フロント／全栈・Safari 検証担当向け
約 8 分で読めます
Safari Web Inspector で リモート Mac と iOS 実機 を前端連調する要点です。表でデスクトップと実機を比較し、手順と FAQ で ペアリング・証明書・切断 を潰します。
01 シナリオと前提条件
WebKit 差分の最終確認では、検証用 リモート Mac で Safari を開き リモートデバッグ するのが典型です。詰まりどころは三つ、開発メニュー見落とし、証明書と信頼、スリープ等の 切断 です。
| 観点 | デスクトップ（リモート Mac） | iOS 実機 |
|---|---|---|
| 目的 | レイアウト・Console 再現 | タッチ・実機メモリ・PWA |
| TLS | キーチェーンで扱いやすい | プロファイル信頼が要ることが多い |
Safari 19 デバッグガイド 併読推奨。
02 デスクトップ（リモート Mac）のリモートデバッグ手順
チェックリスト（五ステップ）
- 環境設定で開発メニューを表示します。
- リモート Mac で URL を開き再現手順を固定します。
- 開発＞Web インスペクタで Elements／Console を分けます。
- 到達できないホストは名前かプロキシでリモートから見えるようにします。
- エラーと URL をログ化し Runbook に一行追記します。
引用メモ：開発メニューはユーザー単位、共有 Mac はプロファイル分離が安全です。
03 iOS 実機との Web Inspector 連携手順
ペアリング：USB で Mac に接続し iPhone でコンピュータを信頼、設定＞Safari＞詳細で Web インスペクタ ON、Mac Safari の開発から端末とページを選択します。
- 証明書：自己署名はプロファイル後にデバイス管理で信頼をオン。
- 切断：自動ロック延長、ケーブル交換、リモートセッションタイムアウト確認。
- E2E：Playwright×リモート Mac と分担。
04 パフォーマンス／ネットワークパネルの要点
タイムラインで長いメインスレッドタスク、ネットワークでキャッシュ・リダイレクト・CORS を見ます。Service Worker 利用時はリロード順のズレに注意します。
05 FAQ（ペアリング・証明書・切断）
リモート Mac で Safari 検証を常設する
Web Inspector の手順は揃えれば再現性が上がります。Mac Mini M4 のクラウド環境なら、フロント連調と自動化を同じノードで回せます。