Cordova開発でAndroid実機テスト中のconsole.logを探したよ
どうも、絶賛アプリ開発熱が爆発中の私です。プログラミングなど開発していると必ずと言っていいほどエラーが発生します。その時、大きな手がかりになるのは、エラー文を見たり、デバッグコードを使ったりすることです。特にWeb開発をする時、自分はデバッグコードとして”console.log”をよく使います。ブラウザで動作確認をするときは、画面表示と一緒にログも確認できるので使い勝手がいいです。
しかし、これがCordova開発、特に実機でのテスト中ともなるとそうはいきません。コマンドからアプリを起動しても、動作中のログは出ません。というわけで、今回はCordovaで開発したアプリをAndroid端末で用いて動作確認をしている時の”console.log”を見れるようにしたいと思います。
OS : macOS Sierra
Cordova : 6.5.0
1. Android実機テスト中のログの出力先
さて、まずは、テスト中のログはどこに現れているかを探しておきます。ネット上で調べていると、Cordovaでアプリを起動させると、専用のログファイルが生成されるらしいです。そして、本来なら、そこにログが出力されるらしいですが、なぜか自分の環境では生成されていなかったので、別の方法を探します。
今回はAndroidでのテストということで、ADBコマンドを使っていきます。ADBは他サイトさんの説明を拝借すると以下のような感じです。
Android Debug Bridge（adb）は、エミュレータ インスタンスや接続された Android 端末と通信できる用途の広いコマンドライン ツールです。
というわけで、今回はこれを使っていきます。おそらくCordovaの環境構築時、Androidの実機テスト時にADBを使うための準備は完了していると思います。一応紹介しておくと、Android Studioをインストールして、Android SDKのパスを通しておくと使えるようになるようです(参考ページ)。
2. 実際に確認してみる
ではログを見てましょう。まず前提として、以下のADBコマンドで大量のログが見れることを確認して見てください。
|
1 |
$ adb logcat |
ここで出力されるのはおそらく端末で発生するすべての動作のログなんでしょう。しかし、ここから目的のログを目視で見つけるのは大変です。というわけで、表示させる項目を減らします。参考サイトのように上手くやればスマートに書けるのかもしれませんが、自分にはよくわからなかったのでgrepコマンドを使って項目を制限します。最終的には以下のようなコマンドになりました。
|
1 |
$ adb logcat | grep CONSOLE |
これで、目的の”console.log”を見れるようになったと思います。
付録 console.logでobjの中身が表示されない
さて、今回の記事からは少し離れてしまいますが、”console.log”を使ってobjオブジェクトの中身を出力する方法を紹介します。と言っても最近のブラウザで表示すれば中身まで見ることができるので、今回のように特殊な方法でログを見るとき以外は無用の長物です。
結論から言いますと、objの中身を文字列に変換してから出力すれば解決です。というわけで、以下のコードのように”console.log”で出力する内容を”JSON.stringify”で文字列化する処理を追加すれば解決です。
|
1 |
console.log(JSON.stringify(obj)); |
もし、いちいち”JSON.stringify”を書くのがめんどくさかったら関数化してしまえばいいのではないでしょうか？
おわりに
さて、今回はCordovaでのログ出力をやりました。正直、ほとんどの場合は、スマホ実機だけではなく、ブラウザでも動作確認ができるので、このようにログをチェックすることは少ないのかなーなんて思います。しかし今回、そう思っていた自分がAndroidでしか動作確認ができない状況に陥ってしまったので、この記事ができたわけです。何が言いたいかというと、人生何が起こるかわからないということです。意味不明なことを書き始めたので今回はこの辺で終わります。