GenymotionでAndroidブラウザでのデバッグをするときのTipsまとめ

全然更新できていなかったのでリハビリ。

最近、Androidのブラウザでのウェブアプリの動作検証をする機会があって、小さいTipsが溜まってきたのでメモ。

いまどきのAndroidならば

いまどき is 4.0以上です。

Android4.0からは、PCのChromeでリモートデバッギングができるので楽。 Remote Debugging on Android with Chrome - Google Chrome

上のドキュメントにしたがって、GenymotionのVMで、USB Debuggingを有効にして、PC Chromeで「chrome://inspect」を開いて、ポチポチすれば、おなじみのDeveloper Toolsを開くことができる。通信の内容、DOMツリー、cookie, LocalStorageなどの諸々のリソースについて調べることができる。

昔のAndroidならば

昔の is Android4より低いバージョン, 特に現状のバージョンシェアを鑑みるとAndroid2.3を意識することが多いでしょう。

これがなかなかつらい。

コンソールに出力された内容を調べたい

ブラウザ(いわゆる「標準」のやつです)のアドレスバーに「about:debug」と入力することで、コンソールに出力された内容を表示することができる。

他にもadbを使う術がある。

adbはAndroidアプリの開発環境を構築すれば使えるし、Macをつかっているならば brew install android-platform-tools で落とせる。

adb logcatで諸々のログが出力されるんだけど、ブラウザのものに絞る場合はadb logcat | grep browser みたいな雑なかんじでやっている。

weinre

weinreというツールがあって、これを使うといまどきのAndroidでできるようなRemote debuggingができる。

「npmパッケージをいれる」,「ローカルにサーバを立ち上げる」,「ページでJSを読み込む or ブックマークレットを実行する」という3手で利用できるお手軽さのわりに得られるものは大きいと思う。ブックマークレットの内容とかページで読み込むJSのURLとかは立ち上げたローカルサーバのページにアクセスすると書いてある。

ただ、見た目がちょっと微妙だったり、いまどきのAndroidのRemote debuggingよりもできることが少なかったりする。

VMの/etc/hostsを書き換える術

これはAndroidのバージョンは関係ない話で Genymotion のVMの/etc/hostsを書き換える話。これもadbをつかって簡単にできる。

adb pull /system/etc/hosts .
vi hosts # よしなに書き換える
adb root
adb remount
adb push ./hosts /system/etc/hosts

まとめ

いまどきのブラウザは楽だけど、昔のブラウザはつらいというかんじ。

Android2.3の標準ブラウザ、予約語がオブジェクトのプロパティ名だったりするとJSが実行されなかったりとハマりどころが多いので、プロジェクトの案件にもよるかもしれないけれど切れるものならば切ったほうがいいと思う。