iOS6の新機能「WEBインスペクタ」を使ってみた

Web inspector ios6 00

今更ながら、iOS6の新機能「Webインスペクタ」を使ってみました。

iPhoneで表示したウェブサイトをMac上でデバッグできる機能。 リモートデバッグなんて呼んでいます。
実は、iOSシミュレータでも使えるのがミソだったりする・・・

スポンサードリンク

設定方法

サラッと設定してみます。

1.iPhone側の設定

▼「設定」アプリから「Safari」
Web inspector ios6 01
(画像はiPod touchの物)

▼一番下にスクロールし「詳細」
Web inspector ios6 02

▼「Webインスペクタ」をオン
Web inspector ios6 03

2.Mac側の設定

▼環境設定から「詳細」、「メニューバーに”開発”メニューを表示」にチェック
Web inspector ios6 04
(Safari6が必要なのでWindowsでは無理らしいです)
以上で設定完了。

Webインスペクタを使う

使い方なんて他のサイトに書いてあると思うんで適当に…
iPhoneやiPadやiPod touchをケーブルで繋ぎ、
▼iOS端末側でSafariを起動すると開いているページのリストがMac側に出てきます。
Web inspector ios6 05

▼選択すると、あら不思議!iOS端末で観ているサイトのソースが出てきちゃいます。
Web inspector ios6 06

▼タグにカーソルを当てるとiOS端末側の画面で対象の範囲がハイライトされる!
Web inspector ios6 07

PCで使うWebインスペクタと同じように、値を変える事もできます。
▼試しに、ブログの横にある「プロフィール」というウィジェットの名前を「自己紹介」に書き換えてみます。
Web inspector ios6 08

▼iOS端末側でも表示が変わってる!

Web inspector ios6 09 Web inspector ios6 10

つまり、PCで使うWebインスペクタと全く同じ事がiPhoneでもできてしまうのです。 CSSやJavaScriptもiPhoneの表示を観ながら弄れるので便利ですね!

iOSシミュレータでも

僕の本当の目的はこれ。
▼Xcodeに付いてくる「iOSシミュレータ」でも同様にWebインスペクタが使えます。 Web inspector ios6 11
ローカルファイルにもアクセスできるのでとても重宝してます。

カテゴリー:Tips タグ:, , ,
Comments
  1. 10年 ago