How to ios safariで表示したwebサイトをwebインスペクタでデバッグする方法

iOS Safariで表示したWebサイトをWebインスペクタでデバッグする方法

11
STEPS
TOOLS

OS X \u306e Safari \u958b\u304d\u3001\u74b0\u5883\u8a2d\u5b9a > \u8a73\u7d30 \u306b\u79fb\u52d5\u3057\u3066\u3001\u300c\u30e1\u30cb\u30e5\u30fc\u30d0\u30fc\u306b"\u958b\u767a"\u30e1\u30cb\u30e5\u30fc\u3092\u8868\u793a\u300d\u3092 On

OS X の Safari 開き、環境設定 > 詳細 に移動して、「メニューバーに"開発"メニューを表示」を On

iOS \u5074\u3067\u3001\u8a2d\u5b9a > Safari > \u8a73\u7d30 \u306b\u79fb\u52d5\u3057\u3066\u3001\u300cWeb\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u300d\u3092 On

iOS 側で、設定 > Safari > 詳細 に移動して、「Webインスペクタ」を On

Mac と iPhone/iPad をUSBケーブルで接続します。

iOS Safari \u3092\u8d77\u52d5\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u3057\u305f\u3044\u30da\u30fc\u30b8\u3092\u958b\u304d\u307e\u3059\u3002

iOS Safari を起動してデバッグしたいページを開きます。

OS X Safari \u306e\u958b\u767a\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u3001\u63a5\u7d9a\u3057\u3066\u3044\u308biOS \u30c7\u30d0\u30a4\u30b9\u3092\u9078\u629e\u3057\u3001\u30c7\u30d0\u30c3\u30b0\u3057\u305f\u3044\u30da\u30fc\u30b8\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002

OS X Safari の開発メニューから、接続しているiOS デバイスを選択し、デバッグしたいページをクリックします。

OS X Safari \u306e Web\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u304c\u8d77\u52d5\u3057\u307e\u3059\u3002

OS X Safari の Webインスペクタが起動します。

\u3042\u3068\u306f\u3001\u3044\u3064\u3082\u306e\u3088\u3046\u306b\u30b4\u30cb\u30e7\u30b4\u30cb\u30e7\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002

あとは、いつものようにゴニョゴニョしてデバッグしてください。

  • iPhone/iPad
  • Mac