iPhone Safariで実機ブラウザのみで再現するバグや事象がある場合に、実機のデバッグをしたいことがあると思います。
普段はWebインスペクタはGoogle ChromeのみばかりなのでSafariを使うことは全然ないのですが、実機デバッグの場合はSafariを使用します。
iPhoneをMac OS Safariでインスペクタでデバッグする方法
iPhone側
「設定」ー「Safari」ー「詳細」
「Webインスペクタ」をONにします。
mac OS側
Safariー「環境設定」ー「詳細タブ」ー「メニューバーに”開発”メニューを表示」にチェック
これで準備OKです。
あとはiPhoneとMacをケーブルで接続し
「開発」ー自分のiPhone名ーインスペクタで表示したいTabを指定する
※ネットワーク経由で接続するで同一ネットワーク同士で接続することもできます。
だいたいはここまででできると思いますが
自分の場合は
- iOS 15.4
- mac OS Catalina 10.15.7
の環境でやると、インスペクタが一瞬開いてすぐに落ちる（閉じる）ような挙動をして表示できませんでした。
Safari Technology Previewを使用する
通常のSafariで使用できない場合は、Safari Technology Previewという通常版とは違うSafariを使用してみるという記事をいくつか見つけたのでやってみることに。
Resources - Safari - Apple Developer
Powered by the WebKit engine, Safari offers leading performance, compatibility, and a great set of built-in web development tools.
developer.apple.com
ただ、現時点（2022年3月）でBig SurまたはMonterey用のインストーラしかなく、
別のmacでBig Sur 11.6.4で試してみたところ正常にiPhoneのWebインスペクタが開けました。
便利な機能ですがMac側とiPhone側の相性問題が結構ありそうです。
