[Android] ブラウザ上でのJSログをPCの画面で確認する

こんにちは、@yoheiMuneです。
Androidに取り組むことを決意！！特にAndroidブラウザやChromeに対する知識を深めて、開発やデバッグを行いやすいようにしたいと思います。
今日は、adbを使ってAndroidブラウザーのJSログを、PCで表示する方法を書きたいと思います。

Special Thanks to http://flic.kr/p/bkDxsm

この記事で伝えたいこと

この記事では、Android端末をPCと接続して、PCでAndroidブラウザのログ（console.logなど）を確認する方法を説明します。 Androidはなかなかデバッグしづらいなぁと感じる毎日です。同じ思いを感じる人々に、自分の学んだデバッグ手法をお伝えできればと思います。

ブラウザ上でJSログを確認する一番簡単な方法

一番簡単な方法は、ブラウザのURL欄に「about:debug」と入力することです。 そうすると、JSログを表示するエリアが表われて、ログを確認することができます。
この方法はとてもお手軽でとりあえずログを確認する時などに重宝しますが、 ログのコピーが出来なかったり、ブラウザの領域を押しつぶしてしまったりと使いづらい点もあります。 今日紹介する方法を使うことで、より快適にAndroidブラウザのJSログを確認できるようになるのではないでしょうか。

adbをセットアップする

AndroidをPCからデバッグをするには、adb（Android Debug Bridge）というコマンドが必要です。まずはそれをインストールしましょう。
Android SDK | Android DevelopersからAndroid SDKをダウンロードして使います。 ダウンロードしたら、adbは(sdkインストールパス)/platform-tools/にあります。
今後のために、そのパスに環境変数を通しておくと便利です。以下は、.bashrcを利用してPATHにadbを登録するサンプルです。

# ~/.bashrc
# 以下の場合、SDKは~/Android/android-sdkにインストールされています。
PATH=$PATH:~/Android/android-sdk/platform-tools  # Android SDK

上記を~/.bashrcに記載して、ターミナルを再起動すると、以下のコマンドが使えます。

$ adb

これで、何か反応すれば、adbのインストールは完了です。
adbのインストールは様々なブログでも紹介されているので、android adb インストール | Google検索も参考にして頂けると幸いです。

Android端末のUSBデバッグを有効にする

続いて、Andrroid端末の設定を行います。Android端末の設定を変更し、PCからUSB経由でデバッグできるように設定します。 手順は以下の通りです。

Android4.2以上

Android4.2以上は、初期状態ではディベロッパーオプションが非表示となっており、まずそれを表示する必要があります。 ディベロッパーオプションを有効化するために、設定アプリを開き、「設定 > 端末情報」を開きます。 そして、「ビルド番号」のところを7回タップすると、ディベロッパーオプションを表示することができます（ちょっと不思議な作りですね）。
その後、「設定 > 開発者向けオプション」を選んで、USBデバッグを有効にします。

Android4.1以下

Android4.1以下の場合には。「設定 > 開発者向けオプション」を選んで、USBデバッグを有効にします。

これで、Android端末の設定が完了しました。

adbを使ってブラウザログを表示する

それでは、adbを使ってAndroidブラウザのログを表示してみましょう。 まずは、USBを使ってAndroidとPCを接続します。 その後、ターミナルで接続確認をしてみましょう。

$ adb devices
List of devices attached
dc0c670d	device

接続されたデバイスの一覧が表示されます。 この状況で、端末のログを確認するためには、以下のように行います。

$ adb logcat
# たぶん、激しくログが表示されます。

これを実行すると、ブラウザも含めて端末が出すログを全て見ることができます。 ただ全部見てもよくわからないので、以下のようにしてブラウザログを特定して表示します。

$ adb logcat | grep browser

これでログがブラウザのログが表示されるようになりました。
試しに、以下のボタンを押してみましょう。ボタンは、以下のように実装されており、ボタンを押すとJSログが出力されます。

<script>
	var showLog = function () {
		console.debug('aaaaaaa');
		console.log('bbbbbbb');
		console.warn('ccccccc');
		console.error('ddddddd');
	};
</script>
<input type="button" value="ログを出力する" onclick="showLog();"/>

上記のボタンを押すと。以下のように表示されます。

I/browser (14531): Console: aaaaaaa:491
I/browser (14531): Console: bbbbbbb:492
W/browser (14531): Console: ccccccc:493
E/browser (14531): Console: ddddddd:494
#左から、ログレベル/browser (PID): Console: ログメッセージ:ファイルの行数

ブラウザログを見ることができました。こんな感じでログをPCの広い画面で見ることができます、便利ですね。

なお、Androidブラウザでconsole.logを行った場合には。第1引数の値までしか表示してくれないようです。

// 以下の場合、bbbは表示されない
console.log('aaa', 'bbb');

// なので以下のように記述する
console.log('aaa' + 'bbb');

ちょっとしたTipsです。またObjectを渡す場合にも、工夫が必要です。

// ログに出したい何らかのオブジェクト
var obj = {
	name: 'Yohei',
	text: 'working in Shibuya'
};

// オブジェクトをそのままログに渡すと、toString()した結果が表示される
console.log(obj); // [object object]と表示される。

// 値を出したいなら、頑張る。
console.log('name:' + obj.name + ', text:' + obj.text);

デバッグするのに、ログは重要ですね〜。

最後に

今日は、Androidブラウザのデバッグ方法について、ログをadb経由で取得する方法をブログに書きました。 Android端末でもログを見ることは出来ますが、本格的にデバッグするなら、PCでやった方がやりやすいですね。

最後までご覧頂きましてありがとうございました。