JSの開発をしている時にスマホでconsoleAPIが使えたら開発が効率的になると感じたことはないでしょうか。
iOS6以上はWindows環境でコンソールが使用出来なかったり、AndroidはPCと端末をUSB接続してエミュレーターを立ち上げて...等、ちょっとしたデバッグをしたい時にコンソールが気軽に使えない事が常々不便だと感じていました。

かと言ってalert()を埋め込んでデバッグするのはナンセンスな上に、console.log()をalert()に書き換えるとレスポンシブのようにPCとスマホの両環境で開発している場合に都度書き換える事になり手間です。
そこで、簡易的なコンソールを自前実装する事にしました。

目的

スマホ（iOS6以上、Android）でコンソールにて文字列、数字、配列、オブジェクトの状態（値）を表示可能とする。

※PC版ChromeのDeveloper ToolsなどネイティブのコンソールAPIのように高機能にする予定はありません

仕様

• 多次元配列など、配列／オブジェクトは再帰的に（深い階層も）値を表示
• オブジェクトはツリー表示とし、プロトタイプ拡張も表示
• 型を直感的に判別出来るよう色分け
• 関数はfunctionである事のみ表示（詳細を表示しない）
• スマホのみwindow.consoleを上書きし、既存コードを書き換えることなくコンソール表示可能（UAでiPhone,iPad,Androidを判別）
• コンソール枠のリサイズ（高さ調整）対応

デモ

下記ページをスマホ（iPhone、Android）で閲覧するか、ChromeのDeveloper ToolsなどでUAをiPhone or Androidに書き換えてご覧ください。

対応（動作確認）ブラウザ

PC：Chrome（UA書き換えにて確認）
スマホ：iOS6以上、Android4.1以上

デモページ

スマホ用コンソールデモ

今後の課題

スマホ判別をUA以外で行う

理想は'console' in windowなどでネイティブAPIが実装されているかを確認出来れば良いのですが、
上記方法ではiOS6やAndroid4ではネイティブで定義されているようなので判別不可。
UAで判別する方法は今後Firefox OSやTizenがリリースされたらコードをメンテする必要があるので出来れば避けたいです。

巨大なオブジェクトの表示対応

現状ではwindowオブジェクトなど巨大なオブジェクトをコンソールに表示できません（window.innerWidthなどプロパティを指定すれば可能）。
これは多次元配列に対応出来るようオブジェクトを再帰的に表示させているため、深い階層のプロパティを延々読んでいる事が原因と考えられます。
これは型の判別をより厳密にすれば恐らく解決可能です。

配列やオブジェクトのアコーディオン表示対応

配列やオブジェクトは全て展開した状態で表示しているため巨大な配列をコンソールに表示するとかなりスクロールしないと最後まで見れない状態になります。
ChromeのDeveloper Toolsのようにn個以上の配列はアコーディオンで展開／格納可能にしたいと考えています。

コンソール枠リサイズUIの改善

コンソール枠をリサイズ（高さ調整）出来るようにしていますが、コンソール内のスクロールと操作が重複するため大きくスワイプする事でサイズ調整可能にしています。
この部分のUIを調整予定。