2014年10月31日金曜日

Cordova/PhoneGap開発のデバッグを何とかする

Cordova/PhoneGapアプリは、ネイティブアプリでラッピングしたWebView内で動くWebアプリだと言える。

これをデバッグするには、そのWebViewからconsole.log等のデバッグ情報を取る必要があるが、どのように取得するのか?いくつかの方法を試した。


Monacaで開発する - NG

MonacaはWebアプリとして作られたIDEだ。

Monaca - HTML5モバイルアプリ開発プラットフォーム

Monacaには「Monaca Debugger」というアプリがAppStoreやGooglePlayで配布されている。

Monaca デバッガー - Monacaドキュメント

これをターゲットデバイスにインストールしておくと、ほぼリアルタイムにコードの変更を反映してくれる。コンソールはもちろん、スクリーンショットを取ったりする機能もある。


ちゃんと動いてくれればベストだったが、残念ながらコードの変更を反映するタイミングが少々遅いのと、いつまで経っても反映されないという状況に何度も陥った。

というわけで、コンソールを使う以前の問題で撃沈。


weinreを使う - NG

weinre(わいなりー)は「WEb INspector REmote」の略で、Webアプリのリモートインスペクターだ。Cordova/PhoneGapの開発では最も一般的な方法らしい。

weinre - Home

Webアプリ内に開発機上のサーバーとコミュニケーションできるようにするスクリプトを埋め込む必要があるので少々面倒だが、ChromeのDevToolsのような感じで取っつきやすい。


実際に使ってみるとconsole.logの内容は出るものの、WebViewが出すエラー(function not defined的なやつとか)がコンソールに出ない。調べてみたが、WebViewが出すエラーを表示する方法は見つからなかった。

これでは非常にキビシイ。。。というわけで撃沈。


Chromeのリモートデバッグを使う - (・∀・)

Android 4.4(kitkat)以降はAndroid上のChromeだけでなくWebViewのデバッグもできるようになった。

Remote Debugging on Android with Chrome - Google Chrome

これは完璧だった。


iOSの場合はSafariが同様の機能を持っているようだ。まだ試していないが、おそらくSafariで同様にデバッグできるだろう。


デバッグ以前の問題として、WebViewのリロードが問題になるだろう。この件についてはこの記事が役に立つだろう。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編