2012/09/22更新

[iPhone] iOS6からの新機能!iPhone Safariで表示したページのデバッグがすんごく楽になるWebkit Webインスペクタがスゴい

このエントリーをはてなブックマークに追加            

こんにちは、 iPhone5が発売されましたね!!iOS6も使えるようになりましたね(*´∇`*) どんどん便利になっていく感じにウキウキしている@yoheiMuneです。

今日は、iOS6のSafariから利用可能となったWebkit Webインスペクタという、 神がかり的なWebデバッグツール。仕事場の方から聞いて、すんごく驚いたので、ブログでも紹介したいと思います。

画像



Webkit Webインスペクタとは

Webkit Webインスペクタとは、ChromeとかSafariとかに付属している開発ツールで、 表示中のWebページや実行したJS、CSSの内容を閲覧、編集などが出来る便利なツールです。
HTML,CSS,JavaScriptを用いたWeb開発をしている人なら一度は使った事あるはず。

以下のような画面右側に表示されているツールがインスペクタです(以下例はChromeのインスペクタです)。

画像



iPhoneの表示内容をデバッグできるWebインスペクタが存在する

開発現場で重宝されるWebkit Webインスペクタですが、Safari6(Macのみ)には何と、 iPhoneで表示している内容をデバッグできるWebインスペクタが内蔵されています。

iPhone側、Safari側それぞれ以下のように設定を行う事で、利用可能となります。


iPhone側の設定

iPhone Safariの表示内容をMac Safari6からインスペクトできるように設定します。
設定アプリを開き、「Safari → 詳細」を開き、「Webインスペクタ」をONにすれば準備完了です。


Safari側の設定

Safari6の初期状態では、「開発メニュー」が表示されていないため、その開発メニューを表示する設定を行います。
メニューで「Safari → 環境設定」で設定メニューを開きます。
設定メニューで「詳細タブ」を開き、「メニューバーに"開発"メニューを表示」にチェックを入れます。
これでSafari6の設定が完了です。


SafariでiPhone表示内容をデバッグするインスペクタを開いてみる

以下の手順で、iPhoneで表示している内容をデバッグする事が出来るようになります。
  1. iPhoneでSafariを開き、SafariのWebkitインスペクタで表示したいページを表示します。
  2. iPhoneとMacをケーブルでつなぎます。
  3. Safariのメニューバーで開発を選択します。
  4. 「XXXX iPhone」(私の場合はMunesada Yohei's iPhone)と繋いだiPhoneがメニューに表示されます。
  5. そのiPhoneを選ぶ、インスペクト可能なリストが選択できるので、iPhoneで表示しているWebページを選択します。
これで、iPhoneで表示している内容に対するWebkit Webインスペクタが開きます。

(開発メニューを選択する部分) 画像

以下のようなWebkit Webインスペクタが表示されたら成功です。
画像

開発メニューに表示されないなど問題にぶち当たるかも(自分はそうでした)。
iPhoneでSafariを開いてなくて(凡ミス痛い。。)、メニューに表示されない。
iPhoneでSafariを開くタイミングと、開発メニューを選択するタイミングが違うと表示されない。
など、微妙な癖があるようです。



Webkit Webインスペクタを使ってみる

Webkit Webインスペクタでは、以下のようなことが出来るようです。
  • HTML,CSS,JSの内容の閲覧、変更できる。(リソースタブ)
  • JavaScriptの追加実行(alertなど関数を実行するとか)が出来る。(リソースタブ)
  • Cookieなどの永続化した情報を閲覧ができる。(ストレージタブ)
  • ロード状況、レンダリング時間、JavaScirptの実行時間などパフォーマンス的なことを確認できる。(音源?タブ)
  • ロードしたファイルのRequest、Response内容を確認できる。(音源?タブ)
  • リソース内の検索ができる。(検索タブ)
  • console.logやエラー出力内容を確認できる。(ログタブ)
上記以外にも、「問題タブ」「一時停止タブ」がありますが、この利用方法はよくわからず。。
何かエラーがあればここで発見できるのかなぁ?

何はともあれ、こんなにも色々なことが出来て便利だなぁと思いました。



最後に

上記の便利な機能が使えるようになった一方で、 iPhone Safariで表示できていたコンソール表示機能は廃止になったようです。Windows開発環境の人には、大変ですね。

上記のようなことをWindows環境やAndroid端末で行うには、Adobe Shadow(詳細は、こちらの記事を参照)を使うと実現することが出来ます。
Adobe Shadowを使えば、複数機種同時に表示確認が出来るなど便利な点が多いので、まだまだ使いどころが多そうです。

iOS6になった進化がスゴい。まだまだ便利な事がありそうです。
色々と調べて、またブログにかければ良いなぁと思います。

最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。