ログ出力ライブラリ「Blackbird」をスマートフォンで使ってみる 
スマートフォンのためのリモートデバッグ環境その1 – weinre
スマートフォンのためのリモートデバッグ環境その2 – JSconsle
とみてきましたが、
もっと単純にログ出力だけで十分という方にはコレがよさそうです。
Blackbird
http://www.gscottolson.com/blackbirdjs/
画面の端っこにログ出力用コンソールが表示されるので
PC向けというよりはスマートフォンなどのログ情報が確認しにくい環境で役に立ちそうです。
iPhone、Androidは上記のweinreやJSconsle使うとしても、
Windows Mobile6.5(IE6)やBlackBerryなどWebSocket使えない系のブラウザには試す価値アリ。
ライブラリのjsとcssを読み込んで以下の通りに打てばコンソール内に出力されます。
log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );
Public APIには
log.toggle() ： コンソールの表示・非表示切替
log.move() ： コンソールを画面の左上・右上・右下・左下の4箇所に切替
log.resize() ： コンソールのリサイズ（拡大・縮小）
log.clear() ： ログのクリア
log.profile( label ) ： Javascriptの処理時間を出してくれるプロファイラ
が用意されています。
他にもキーボードによるショートカットキーやブックマークレットでこれらのメソッドを実行できたりもしますが、
スマートフォンでの問題はキーボードが使えないので
ブックマークレットでコンソールの表示・非表示を切り替える必要が出てきます。
ちょっとそれも面倒ですね。
iPhoneに限ってしまいますが、
jQueryプラグインのgShake使って、シェイクイベントをトリガーにするとか
最上面に画面いっぱいdivをひいて、ダブルタップされたら切り替えるとかですかね。
とりあえず作ってみたらうまくいきました。
log.toggle() ： コンソールの表示・非表示切替
log.move() ： コンソールを画面の左上・右上・右下・左下の4箇所に切替
log.resize() ： コンソールのリサイズ（拡大・縮小）
log.clear() ： ログのクリア
log.profile( label ) ： Javascriptの処理時間を出してくれるプロファイラ
が用意されています。
他にもキーボードによるショートカットキーやブックマークレットでこれらのメソッドを実行できたりもしますが、
スマートフォンでの問題はキーボードが使えないので
ブックマークレットでコンソールの表示・非表示を切り替える必要が出てきます。
ちょっとそれも面倒ですね。
iPhoneに限ってしまいますが、
jQueryプラグインのgShake使って、シェイクイベントをトリガーにするとか
最上面に画面いっぱいdivをひいて、ダブルタップされたら切り替えるとかですかね。
とりあえず作ってみたらうまくいきました。
<div id="test" style="width:100%; height:100%; z-index:999;">TEST</div>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="gShake.js" type="text/javascript"></script>
<script src="jquery.event.dblTap.js" type="text/javascript"></script>
<script src="blackbird.js" type="text/javascript"></script>
<link href="blackbird.css" type="text/css" rel="Stylesheet" />
<script>
$(document).ready(function() {
log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );
$("#test").bind("dblTap",function(){
log.toggle();
});
$(this).gShake(function(){
log.toggle();
});
});
</script>
alt
