Yuta Watanabe's Blog

開発周りと、その他諸々

PhoneGap iOS アプリ開発でのデバッグ

こんにちは。

マイクロソフトの渡辺です。

PhoneGap を使っての iOS アプリ開発におけるデバッグについて、簡単に書き留めておきます。

Web サイトやサービスの制作/開発をする際にブラウザの開発者ツールを使うように、PhoneGap での iOS アプリ開発でも Sarafi の Web インスペクタを利用することができます。今回ご紹介するのは、iOS シミュレータと実機端末でのデバッグです ( 残念ながら 2014/8/31 現在、PhoneGap Developer App ではこの機能は使えないようです )。

iOS 側の Safari で Web インスペクタを ON にする

設定から Safari へと進みます。

f:id:yuwata:20140831174151p:plain

詳細を選択。

f:id:yuwata:20140831174208p:plain

すると、Web インスペクタの項目があるので、ONにします。

f:id:yuwata:20140831174222p:plain

これで iOS 側の準備は完了です。

Safari の開発者メニューを表示

次に Safari 側の設定を行います。

Safari を起動して、メニューから環境設定を選択。

f:id:yuwata:20140831174534p:plain

詳細タブにある、”メニューバーに"開発"メニューを表示”にチェックを入れます。

f:id:yuwata:20140831174548p:plain

これで、Safari 側の準備も完了です。

Web インスペクタを確認

ここまでの設定を終えた上で、

phonegap run --device ios

phonegap run --emulator ios

で、アプリを実行してみましょう。

Safari の開発メニューを見ると、アプリが動作している iOS シミュレータまたは実機が表示されるので、選択してみます。

f:id:yuwata:20140831175221p:plain

その後は、いつもの Web 開発での使い心地と同じです。要素を検証することもできますし、コンソールも同様に使えます。

f:id:yuwata:20140831175252p:plain

iOS アプリの実機でバッグには、別途証明書の登録等が必要になりますが、既にお済みの方はぜひ、実機でも Web インスペクタを試してみてください。