iOS(iPhone/iPad/iPod)で開発者ツール

用意するもの

手順

iOS側の事前作業

「設定」アプリから「Safari」→「詳細」→「Webインスペクタ」をONにする

macOS側の事前作業

  1. Safariを起動する
  2. メニューから「Safari」→「環境設定...」
  3. 「詳細」タブ→「メニューバーに"開発"メニューを表示」をONにする

つなぎ作業

  1. ケーブルでmacとiOSデバイスを接続する
  2. 初回の場合、iOS側で「このコンピュータを信頼しますか?」と出るので「信頼」する。
  3. macOS側Safariの「開発」メニューに対象のデバイスが表示されているので、そこからデバッグしたいタブを選択。

    選択中のタブがアクティブな場合、iOS側Safariでタブ全体がマークされる。
  4. するとmac側Safariの開発者ツールである「Webインスペクタ」が表示される。Webインスペクタでフォーカス中の要素は、iOS側Safariでもマークされる。

もちろん要素に限らずネットワークなどの他のタブも有効。

Webインスペクタはシミュレーター(Xcode付属のSimulator)にも有効なので、実機とは若干挙動が異なるものの、取り急ぎのテストには使える。

参考