2013年6月7日金曜日

iPhoneのブラウザでconsole.logを表示する方法

iOS6になりiPhoneのSafariからconsole出力機能が除外された。
今までは設定→Safari→デベロッパ→デバックコンソールをONにすることで
エラーログを確認することができた。
この機能がiOS6ではWebインスペクタに置き換えられてしまった。Webインスペクタとは
iPhoneで閲覧しているwebサイトのエラーログを有線接続したMacのSafariで
見ることが出来るというもの。
すなわち、iOS6ではiPhone単独でconsole.logを表示することができなくなってしまったということだ。

対策方法を2つ紹介する。

1.お手軽な方法

windowのonerrorイベントを拾って、エラーの内容をそのままalert表示してしまうという解決方法。
下記の三行を追加するだけで実装できる。

window.onerror = function(error) {
    alert(error);
};

お手軽で分かりやすい。そのかわりにエラーが起きなければ情報表示をすることができない。「変数の中身をコンソールに出力する」というような
      感覚で使用することができない。

2.ほんの少し面倒な方法
Bernhard Zwischenbrugger氏のwaterbugというフリーソフトを使う。
フリーソフトといってもjsファイルを読み込ませるだけだ。

jsファイルは下記リンク先にある
https://github.com/robotnic/waterbug

htmlファイルにこの一行を追加するだけでOK
<script type="text/javascript" src="waterbug.js"> </script>

あとはconsole.logと同じような感覚でコンソールに出力したい文字列や配列やオブジェクトをwaterbug.log()
を使用してソースに書き込んでいけばいい。

iPhone90°右へ傾けることでwaterbug.jsのコンソールが表示される。
ちなみにAndroid4.Xでも機能するそうだ。
モバイル向けのwebアプリ開発にはとても便利。


0 件のコメント:

コメントを投稿