ブレークポイント対応！Android用MonacaアプリをGoogle Chromeでリモートデバッグ！

アプリ開発の効率をあげるためにはどうすれば良いでしょう。開発していて、書いたコードが一発で問題なく動くことなどほとんどない訳で、大事なのはデバッグになります。問題のありそうな箇所をいち早く突き止めて、修正していくことでアプリの精度を高めていくのが大事です。

 

Objective-CやSwift、Javaといったネイティブのプログラミング言語とはちょっと切り離されているハイブリッドアプリの場合、そのデバッグ方法も異なってきます。今回はMac OSXを使ってAndroid用Monacaアプリのデバッグ法を紹介します。

 

Monacaデバッガーのダウンロード&インストール

 

Monacaデバッガーは通常版とハイパフォーマンス版が用意されています。通常版はOS標準のWebView、ハイパフォーマンス版はCrosswalkというWebViewエンジンを利用する点が異なります。利用するMonacaデバッガーはどちらでもかまいませんが、今回紹介するGoogle Chromeを使ったデバッグ法はそれぞれ対象となるAndroidのバージョンが異なりますのでご注意ください。

 

Monacaデバッガー

 

• ハイパフォーマンス版：Android 4.0以上
• 通常版：Android 4.4以上

 

なお、利用に際してGoogleアカウントが必要になりますのでお持ちでない場合はアカウントを作成してください（無料です）。

 

AndroidデバイスでUSBデバッグを有効にする

 

デバッグをはじめるにあたり、Androidデバイスで開発者向けオプションを有効にし、USBデバッグを許可している必要があります。忘れずにチェックしてください。

 

開発者向けオプション

 

実際のデバッグ時には母艦とAndroidデバイスをUSBケーブルでつないでください。

 

Monacaデバッガーでアプリを立ち上げ

 

ではいよいよMonacaデバッガーを起動します。

 

ログイン画面

 

ログイン画面が出たら、MonacaのユーザID/パスワードを入力してログインボタンをタップしてください。ログインできるとMonacaクラウド上のプロジェクトが一覧表示されます。

 

プロジェクト一覧

 

この中からデバッグしたいプロジェクトをタップします。

 

たとえばこのようにアプリが立ち上がったらデバッグ開始です。

 

Monacaアプリ起動

 

Google Chromeを使ったデバッグ

 

Android 4.0からデスクトップ版Google Chromeを使ったデバッグができるようになりました。Monaca IDEで提供しているデバッグパネルよりも詳細なデバッグが可能になっています。

 

まず、Google Chromeから chrome://inspect を開きます。

 

Google Chromeインスペクタ

 

そうするとDevicesとして接続されているAndroidデバイスと起動しているエミュレータが一覧で表示されます。今回のように実機で実行している場合、そのアプリ名とバージョン、開いているHTMLファイルのタイトルなどが表示されています。
デバッグしたいアプリののInspectをクリックします。

 

DevTools起動

 

DevToolsが表示されますので、後はソースを見たり、DOMの構造を確認したりできます。

 

ブレークポイント/DOMのハイライト

 

Google Chromeを使ったデバッグでは、これまでは難しかったブレークポイントを追加することもできます。

 

ブレークポイントを設置

 

こちらはブレークポイントで停止しているところ。変数の内容も確認できます。

 

ブレークポイントで停止

 

コンソールでconsole.logの内容も確認できます。

 

コンソールの表示

 

実機でもDOMがハイライトされるので、どこにフォーカスしているかが一目で分かります。

 

DOMのハイライト

 

ブレークポイントで停止している時の表示です。続行ボタンをタップすればJavaScriptが実行されます。

 

ブレークポイントでの停止中

 

実機を使ったデバッグの場合、カメラや加速度、プッシュ通知周りの実装確認が容易になることでしょう。

 

ここまで詳細にデバッグができると、開発のしやすさが格段にあがってくるのではないでしょうか。

 

iOS/Androidの違い

 

iOSではこれまでデスクトップ版Safariと組み合わせたデバッグが一般的でした。Androidではweinreが使われてきましたが、若干機能が足りないと感じることも多かったでしょう。この方法で紹介するようにAndroidでもUSBデバッグが行えるようになったので、Webブラウザ（SafariかGoogle Chromeか）という以上の違いはほとんどなくなっています。

 

なお、Androidはアプリがバックグラウンドに入っていてもDevToolsを接続することができます。バックグラウンドでの処理を確認したり、フォアグラウンドになっていない時の通知処理などを確認するのにはぴったりと言えそうです。Safariはバックグラウンドにすると接続が切れてしまいます。

 

まとめ

 

Webでは元々ブラウザの画面解像度が様々でウィンドウの大きさも千差万別でした。そのためレスポンシブWebデザインに代表されるようなあらゆるデバイスで意図した通りに表示させる技術に長けています。それはAndroidのように多様性のある解像度をもったデバイスでの表示に役立つことでしょう。

 

その開発において普段使い慣れたデバッガを使えれば、表示や処理の確認がさくさく進められるはずです。ぜひGoogle Chromeを活用してMonacaアプリ開発を効率的に進めてください！