iOSバージョンとMacBookのSafari開発者ツールについて

概要

• iOS実機とMacbookを接続して実機デバッグする中で、開発者ツールがうまく動かない事象が発生
• iOS実機のバージョンにより再現が異なることを確認
  • iOS 12.4.9
    • 問題なし
  • iOS 14.2
    • MacbookのSafariから実機接続は可能
    • 開発者ツールの[要素]タブから、適当なhtml要素を選択すると、「スタイル」にCSSクラスのスタイルが表示されない html要素に直接指定されているスタイルのみ表示されている状態
  • iOSシュミレーター
    • MacbookのSafariの[開発] メニューにシュミレーターが表示されない
• iOS実機とMacbookの接続方法や設定については、たくさん記事が上がっているので割愛

解決方法

• Safari Technology Preview をインストールして利用することで、開発者ツールが問題なく使えることを確認。

developer.apple.com

• Safari Technology Preview はCatalinaとBug Surに対応している
• Catalinaの10.15.5に入れようとしたところ、10.15.6からインストール可能というエラーになったので、 10.15.7を入れて問題なく動作できることを確認。