Android用のハイブリッドアプリを構築してみる。。。～実機デバッグの実行～

はじめに

今回は、PCとAndroid端末をUSBで接続し、
Android端末上でCordovaで作成しているハイブリッドアプリを実行してみます。

Android端末での実機デバッグの実行

Android端末の事前設定

• 開発者オプションのUSBデバッグをONにする

cordovaの実行

以下のコマンドを実行

cordova run android --device

Android端末での許可

Android端末側で下記のような画面が表示されるので「OK」をタップ。

Android端末での実行結果

やはり、<router-view/>が初期表示でレンダリングされない
「Home」をクリックすると・・・

こちらもエミュレータ実行と同様ロゴが表示されていない。。。
ただし、エミュレータ実行に比べて反応がよいです。
エミュレータ実行では、ボタンを押下したときに動いているのかわからないレベルの反応速度ですが、
Android実機デバッグでは、普通に反応してくれます。

Android実機実行時のデバッグの方法

上記の手順でAndroid上で実行したら、Chromeでデバッグ実行できます。

Inspect with Chrome Developer Toosの実行

PCとAndroid端末をUSB接続して、Androidの実機実行中に
ChromeのURLを入力する部分にchrome://inspect/#devicesと入力すると、下記のような画面が表示されます。

WebViewをInspectする

Inspect with Chrome Developer Toos画面内に接続しているAndroid端末上で実行されているWebViewがあるので、
そのWebViewの「Inspect」ボタンをクリックすると、下記のような画面が表示されます。

これで、Web開発と同様にHTML/JSのデバッグが可能です。