Android WebViewでデバック
Android の WebView にアセットに登録したHTML・CSS・JavaScriptをChrome Developer Toolsを使ってデバックすることができます。
Web開発で使ったことのあるツールなので、それをAndroidアプリで使えるのは便利です。
デバックするときの条件
- コンピュータに Chrome 32 以上がインストールされていること
- USB ケーブルで Android 端末と接続できること
- Android 端末で USB デバッグが有効になってること
- Chrome for Android で使う場合は Android 4.0 以上
- Webview アプリで使う場合は Android 4.4 以上
後半の2点だけ注意すれば、問題なさそうです。
実装
Chrome Developer Toolsを利用するために、以下のコードを記述します。
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
デバック
Chrome のアドレスバーに chrome://inspect と入力します。
そうすると、WebView一覧が出てくるので、その中からデバックしたいWebViewに inspect をクリックします。
余談
Stethoというものを使えば、Chrome Developer Toolsでネットワーク状況も確認できるそうです。
また、SQLiteやPreferenceの中を覗くこともできそう。
この辺りをログに吐き出して確認していた部分でもあるので、Stethoを入れるのは良さそうです。
StethoでAndroidのNetwork Performanceを見る
Android: StethoでSQLite, Preferenceの中を覗く