Monaca デバッグログ機能で快適デバッグ
こんにちわ、中川です。
突然ですが、皆さんはスマートフォン用サイトの JavaScript プログラミングをしていて、デバッグ情報や例外情報を確認する方法がなくて困ったことはありませんか？
デバッグ情報を見るために、動作確認をパソコン上のブラウザ (Chrome や Firefox など) で行い、それらに付属している開発者ツールでデバッグを行っているという人が多いようです。しかし、パソコンとスマートフォンでは挙動が異なる部分もありますし、出来る限りスマートフォンだけで動作確認とデバッグ情報の確認を行いたいですよね。
そこで、今回紹介するのが Monaca のデバッグログ機能です。
デバッグログ機能とは、Monaca で開発したアプリの実行中に、ログ情報や例外情報などを出力する機能です。ログは Monaca デバッガのデバッグログ画面から確認することができます (Monaca IDE 下部のデバッグログビューでも確認できます)。
それでは、使い方を見ていきましょう。
任意の情報を出力する
まず、ユーザが任意でログ情報を表示する方法です。ログへの書き出しは JavaScript の
関数を呼び出すことで行います。現在サポートしているのは下記の３つです。
- console.log() : ログの出力
- console.warn() : 警告の出力
- console.error() : エラーの出力
これら関数は PhoneGap の 機能を利用するため、PhoneGap が完全にロードされたあと、つまり deviceready イベントが発行された後でしか使用することができません。
deviceready イベントについてはこちらを参照してください。
PhoneGap Documentation | API Reference | Events
具体的な使用例は下記のようになります。
<head>
<!-- PhoneGap の JavaScript ファイルを読み込み -->
{% if Device.Platform == IOS %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_ios.js"></script>{% endif %}
{% if Device.Platform == Android %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_android.js"></script>{% endif %}
<script type="text/javascript">
// deviceready イベントハンドラ
// PhoneGapの読み込みが完了したので、PhoneGapのメソッドを安全に呼び出すことができます。
function onDeviceReady() {
console.log("これは log メッセージです。");
console.warn("これは warn メッセージです。");
console.error("これは error メッセージです。");
}
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onload="onLoad()">
実行すると、次のようにログが出力されます。
JavaScript の文法ミスや例外を表示する
次に JavaScript の文法ミスや例外情報などを出力する方法です。といっても、これらは文法ミスや例外が投げられたときに自動的に出力されます。
いくつか具体例を見てみましょう。まず次のソースコードのように、足し算する相手を書き忘れた場合を見てみます。
function myfunc() {
var sum = 3 +;
}
すると、次のような例外を出力します。/www/index.html の 34 行目付近で文法ミスをしていることが分かりました。
[INFO] [Error] (in /www/:34) Parse error
次に、myfunc 関数内で整数に整数を代入しようとした場合を見てみます。
function myfunc() {
3 = 5;
}
次のような例外を出力します。myfunc 関数内の代入操作でミスがあることが分かります。
[INFO] [Exception] (in /www/ myfunc()) ReferenceError: Left side of assignment is not a reference.
以上のように、JavaScript の例外情報を簡単に確認することができました。
まとめ
今回は Monaca のデバッグログ機能を紹介しました。デバッグログ機能を使うことで、任意の情報や、JavaScript の文法ミス、例外情報などを簡単に実機上で確認することができます。
Monaca で快適なスマートフォンアプリ開発をお楽しみください。
