alt

前回紹介したweinreに続いて、
JSConsoleというデバッグツールもよさげなのでテスト。
簡易的に使うなら便利だけど、正直Firebug並みのことはできないです。
あとセキュリティ面でもjsconsole.com側にDOMやクッキー情報が筒抜けなのでご注意をば。

サポート環境は
iOS 4.2.x – iPad, iPhone 4
Andriod 2.2.2 – Nexus One
webOS – Palm Pre

JSConsoleのソースはGitHubにあります。
https://github.com/remy/jsconsole


１．JSConsoleはサイト自体がデバッグコンソール画面となっているWEBアプリなので以下にアクセス。
http://jsconsole.com/

２．最上部の入力フィールドに「:listen」と打つとコネクション用のIDが発行されたJavascriptソースが表示される。


３．JSをコピペしてデバッグ対象のHTML内に挿入する。

４．HTMLファイルをサーバーへアップロードし、iPhoneやAndroidなどのスマートフォンでアクセスしてみる。

５．デバッグコンソールに
Connection established with http://xxx.com/xxx.html
と画面に出れば接続完了。


６．デバッグコンソールの入力フィールドにalert(”hello”);と打ってiPhoneにダイアログが出ればOK。
その他、「window.screen.width」と打ってリモートのwindowオブジェクトにアクセスしたり、
jQueryを使ったサイトなら$()でDOMを操作できるのが分かる。
もちろん、自作のJavascript関数も操作できる。

７．ちなみに「:help」と打つと、JSconsle APIを参照できる。

:load – 指定サイトのDOMが取得できる。 ← 使えなかったので未対応なのかな
:load jquery, underscore, prototype, mootools, dojo, rightjs, coffeescript, yuiなどのライブラリを読み込ませることができる。
例） :load jquery ← これでjQuery読み込めるっぽいけど、読み込み完了したのにこれも使えなかったよ
:listen [id] – リモートデバッグを開始する
:clear – コンソールのログを消去する
:history – 入力フィールドの履歴を参照する
:about – 不明


「JSconsle」iPhoneアプリ版
http://civic.xrea.jp/2011/03/03/jsconsole/
http://d.hatena.ne.jp/nakamura001/20100928/1285637617

「JSconsle」Androidアプリ版もあった
https://market.android.com/details?id=com.jgmcelwain.jsonsole&hl=ja


上のアプリを手に入れるなら、ついでにこれらのスマホと連携して使えるBluetoothキーボードも欲しい。