iphone webアプリ 開発ツールをつかう

iPhone用のサイトをデバッグする際、user-agentを変更して見るのがお手軽ですが、
今や実機で見ながらMacからインスペクタを起動していろいろいじれちゃうみたいです。

必要なもの

手順

  1. iPhoneの設定 → safari → 詳細 → WEBインスペクタ をオンにします
  2. Macsafari → 環境設定 を開きます
  3. 詳細(右端)タブの「メニューバーに"開発"メニューを表示」にチェックします
  4. iPhonesafariを起動し、Macに接続します
  5. 開発メニューでiPhoneを選択できる用になっているので、選択します。


これでWEBインスペクタが立ち上がって、いつも通りhtml,cssを書き換えてみたり、コンソールからjavascriptも実行できちゃいます。
ちゃんとiPhonesafari上でも選択したエレメントが反転してたり、しっかりわかりやすくて思いのまま!
便利ですね!!