ブレークポイント対応!Android用MonacaアプリをGoogle Chromeでリモートデバッグ!
アプリ開発の効率をあげるためにはどうすれば良いでしょう。開発していて、書いたコードが一発で問題なく動くことなどほとんどない訳で、大事なのはデバッグになります。問題のありそうな箇所をいち早く突き止めて、修 正していくことでアプリの精度を高めていくのが大事です。
Objective-CやSwift、Javaといったネイティブのプログラミング言語とはちょっと切り離されているハイブリッドアプリの場合、そのデバッグ方法も異なってきます。今回はMac OSXを使ってAndroid用Monacaアプリのデバッグ法を紹介します。
Monacaデバッガーのダウンロード&インストール
Monacaデバッガーは通常版とハイパフォーマンス版が用意されています。通常版はOS標準のWebView、ハイパフォーマンス版はCrosswalkというWebViewエンジンを利用する点が異なります。利用するMonacaデバッガーはどちらでもかまいませんが、今回紹介するGoogle Chromeを使ったデバッグ法はそれぞれ対象となるAndroidのバージョンが異なりますのでご注意ください。
- ハイパフォーマンス版:Android 4.0以上
- 通常版:Android 4.4以上
なお、利用に際してGoogleアカウントが必要になりますのでお持ちでない場合はアカウントを作成してください(無料です)。
AndroidデバイスでUSBデバッグを有効にする
デバッグをはじめるにあ たり、Androidデバイスで開発者向けオプションを有効にし、USBデバッグを許可している必要があります。忘れずにチェックしてください。
実際のデバッグ時には母艦とAndroidデバイスをUSBケーブルでつないでください。
Monacaデバッガーでアプリを立ち上げ
ではいよいよMonacaデバッガーを起動します。
ログイン画面が出たら、MonacaのユーザID/パスワードを入力してログインボタンをタップしてください。ログインできるとMonacaクラウド上のプロジェクトが一覧表示されます。
この中からデバッグしたいプロジェクトをタップします。
たとえばこのようにアプリが立ち上がったらデバッグ開始です。
Google Chromeを使ったデバッグ
Android 4.0からデスクトップ版Google Chromeを使ったデバッグができるようになりました。Monaca IDEで提供しているデバッグパネルよりも詳細なデバッグが可能になっています。
まず、Google Chromeから chrome://inspect
を開きます。
そうするとDevicesとして接続されているAndroidデバイスと起動しているエミュレータが一覧で表示されます。今回のように実機で実行している場合、そのアプリ名とバージョン、開いているHTMLファイルのタイトルなどが表示されています。
デバッグしたいアプリののInspectをクリックします。
DevToolsが表示されますので、後はソースを見たり、DOMの構造を確認したりできます。
ブレークポイント/DOMのハイライト
Google Chromeを使ったデバッグでは、これまでは難しかったブレークポイントを追加することもできます。
こちらはブレークポイントで停止しているところ。変数の内容も確認できます。
コンソールでconsole.logの内容も確認できます。
実機でもDOMがハイライトされるので、どこにフォーカスしているかが一目で分かります。
ブレークポイントで停止している時の表示です。続行ボタンをタップすればJavaScriptが実行されます。
実機を使ったデバッグの場合、カメラや加速度、プッシュ通知周りの実装確認が容易になることでしょう。
ここまで詳細にデバッグができると、開発のしやすさが格段にあがってくるのではないでしょうか。
iOS/Androidの違い
iOSではこれまでデスクトップ版Safariと組み合わせたデバッグが一般的でした。Androidではweinreが使われてきましたが、若干機能が足りないと感じることも多かったでしょう。この方法で紹介するようにAndroidでもUSBデバッグが行えるようになったので、Webブラウザ(SafariかGoogle Chromeか)という以上の違いはほとんどなくなっています。
なお、Androidはアプリがバックグラウンドに入っていてもDevToolsを接続することができます。バックグラウンドでの処理を確認したり、フォアグラウンドになっていない時の通知処理などを確認するのにはぴったりと言えそうです。Safariはバックグラウンドにすると接続が切れてしまいます。
まとめ
Webでは元々ブラウザの画面解像度が様々でウィンドウの大きさも千差万別でした。そのためレスポンシブWebデザインに代表されるようなあらゆるデバイスで意図した通りに表示させる技術に長けています。それはAndroidのように多様性のある解像度をもったデバイスでの表示に役立つことでしょう。
その開発において普段使い慣れたデバッガを使えれば、表示や処理の確認がさくさく進められるはずです。ぜひGoogle Chromeを活用してMonacaアプリ開発を効率的に進めてください!