iPhone SafariのWebインスペクタをMac Safariでデバッグする方法

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.

ただ、現時点(2022年3月)でBig SurまたはMonterey用のインストーラしかなく、

別のmacでBig Sur 11.6.4で試してみたところ正常にiPhoneのWebインスペクタが開けました。

 

便利な機能ですがMac側とiPhone側の相性問題が結構ありそうです。

 

開発日記
この記事の投稿者
AKI

ソフトウェアエンジニア歴10年以上、業務系システムからゲーム開発まで幅広く経験し
現在はフリーランスプログラマとして従事している。
得意言語: PHP, JavaScript, Java, C#(Unity)

フォローする
フォローする
スポンサーリンク
WoW creators
タイトルとURLをコピーしました