Androidの実機でウェブサイトのJavascriptをデバッグする方法

スマートフォン向けのWebサイトを作ると、おおむね使われるJavascript。
Androidの実機でデバッグしたい時に、実機にコンソールを表示する方法と、PCに表示させる方法。

その①　実機のAndroid標準ブラウザでコンソールを表示する

(1)Android標準ブラウザを起動する
(2)アドレスバーに“about:debug”を入力してEnter

(3)ブラウザの「サブメニュー」→「設定」に、”デバッグ”をタップ

(4)“Show Javascript Console”にチェックが入っていることを確認　※“UAString”でユーザーエージェントも変えられたりします
(5)ブラウザに戻って“SHOW JAVASCRIPT CONSOLE”をタップすると、コンソールログが表示される※以下のメソッドが使えるらしい
console.log();
console.info();
console.warn();
console.error();

(6)コンソールを表示した状態でフォームにコードを入力し、“Evaluate”をタップすると、Javascriptが実行できちゃいます
(7)デバッグが終わったら、もう一回アドレスバーに“about:debug”を入力してEnter

その②　Android SDKのadb(Android Debug Bridge)ツールを使ってPCに表示する

※実機とPCをUSBで繋いでおく
※実機の「設定」→「開発者向けオプション」→「USBデバッグ」にチェックを入れておく

(1)手始めにAndroid SDKをインストール　※仮にc:直下に保存
(2)コマンドプロンプトをたちあげる
(3)c:\android-sdk\sdk\platform-tools に移動
(4)“adb devices”を打って、接続が認識されているかを確認

(5)“adb logcat -v time | findstr browser”で、ブラウザに関連するログを時間付きで表示
(6)“adb logcat -v time | findstr browser > log_20130530.txt”で、ブラウザに関連するログを時間付きでlog_20130530.txtに吐く

他にも、SDKのadbツールは、apkをインストール/アンインストールできるコマンドだったり、シェルを起動するコマンドもあり、いろんなことができて便利そうです。