Web開発では度々お世話になるデベロッパーツール。(Chrome右クリックで出てくる検証のアレです)実はiOSのSafariでも検証ツールが使えるって知っていましたか?
用意するのはiOSとMacのSafari、USBケーブル。これだけで、iOS上で実行しているWebページを、PC上で検証することができるんです。
iOS Safari実機検証のやりかた
iOS Safariで検証ツールを使うには、macOSが必要です。
iPhone/iPadとMacをUSBで接続します
【iOS】設定アプリ → Safari → 詳細 → Webインスペクタを オン に
【Mac】Safari.app → 環境設定 → 詳細 → メニューバーに”開発”メニューを表示 をオンに
MacのSafariのメニューバーに開発の項目が追加されていたら準備OKです!
【iOS】Safariで検証したいページを開く
【Mac】Safari.app → 開発 → デバイスを選ぶ → ページを選ぶ
これでSafariのWebインスペクタが開いて、Chomeのデベロッパーツールと同じようにDOMやスタイルの確認書き換え、ネットワークのログの確認などができます。
とても簡単で便利なので、ぜひ使ってみてください。
Androidの方は…
AndroidのChromeでも、PCのChromeから同じ用にUSB経由で検証ツールを使う方法があります。Googleさんが紹介してくれているのでこちらをどうぞ↓
Android 端末のリモート デバッグを行う
https://developers.google.com/web/tools/chrome-devtools/remote-debugging?hl=ja