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 Debuggi...