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