Galaxy Nexusを買ったぞー！！
というわけで，これでiPhone 4S/3GSとWindows PhoneとAndroid4.0が揃い，スマートフォン対応は俺に任せろー！状態になりつつある私です。
しかし，ここまで色々持ってても自分が興味あるのはウェブですので，スマートフォン用ウェブサイトを作る上で必要になるリモートデバッグツールについて今回は書きます。
リモートデバッグとは，デスクトップ上でスマートフォンのブラウザに出ている画面をデバッグする手法です。リモートデバッガはいくつかあります。
私が紹介するよりも，こちらにわかりやすくまとめられているものがあるのでkanasanさんのを見た方が圧倒的にいいと思います。私もkanasanさんのプレゼンではじめて知った口です。
http://www.kanasansoft.com/weblab/2011/07/html5toka19.html
で，Android4.0といえば，Chrome betaがリリースされましたね。
このChrome betaには，リモートデバッグ機能がついています。
今回は，Chrome betaのリモートデバッグについてと，weinreとの違いを自分が使ったレベルで浅いのですが，紹介します。
Chrome betaのリモートデバッグ使い方
まず，Chrome betaのリモートデバッグ方法です。
http://code.google.com/chrome/mobile/docs/debugging.html
ここ見れば書いてあります！
で終わるのも何なんで，Android SDKを入れるところからから書いて行きます。
環境はMac OS X Lionです
Android SDKをhttp://developer.android.com/sdk/index.html からダウンロードする
zipを展開して，任意のフォルダへ。
open SDK_HOME/tools/android または ./SDK_HOME/tools/android で Android SDK Managerを起動(*図1)
しばらくするとAndroid SDK Platform-toolsが出てくるのでインストール（このとき自分はなぜか何回も失敗したがリトライし続けたら入りました）
SDK_HOMEにplatform-toolsというディレクトリができるので，SDK_HOME/platform-toolsをPATHに登録する。
図1 Android SDK Manager
ここまでが，リモートデバッグを利用する最小限のSDKの準備です。
次にAndroid側の準備です。
[設定]＞[開発者向けオプション]＞[USBデバッグ]をオンにする
[Chrome betaの設定]＞[USBウェブデバッグを有効化]をオンにする
SDKの入っているマシンにAndroidをUSB接続する
これでAndroid側は準備完了。
最後にマシン側を設定します。
adb devicesをターミナル上で実行してみて，自分のAndroidが接続されていることを確認する
adb forward tcp:9222 localabstract:chrome_devtools_remote
マシン側のChromeでlocalhost:9222を開く
Android側で開いているタブの一覧が表示されるので，マシン側でデバッグするタブを選択する
見慣れたdeveloper toolsが開くので，あとはよしなに！
以上でChrome betaのリモートデバッグは可能になります。
VIDEO
ちなみに動画でも利用方法が紹介されています。
weinreの使いはじめ方
次に，weinreです。
こちらはkanasanさんのスライドにも紹介されているリモートデバッグツールで，Webkit系ブラウザならどれでもリモートデバッグが可能になります。
Chrome betaと同じように使い方を書いておきます。環境はこちらもMac OS X Lionです。
http://phonegap.github.com/weinre/から本体をダウンロードする（macはbinaryが配布されています）
落としてきたbinaryを起動します
図2みたいなのが起動します
Server Home Pageのタブを開いて，Exampleのscriptタグをコピーして，デバッグ対象のhtmlに書き足します
デバッグ対象をスマートフォンから見ると，weinreのビューでデバッグすることができます
図2 weinreの起動画面
違うサーバのデバッグを行いたいときは，ホームディレクトリに.weinreディレクトリができているので，そこにserver.propertiesを作って，
boundHost: hostname
httpPort: portnum
と書いて起動すれば，起動画面のServer Propertiesが書き変わるはずです。
変えた場合，スクリプトを取得する先も変わるので書き換えましょう。
両者の違いについて
ここまでは前置きで，ここからが本題です。
weinreとChrome betaの違いについてです。
恐らく，Chrome betaはあくまでChrome betaだけで，weinreはそれ以外用だ，という意見が大半でしょう。
その通りです。
ただChrome betaをデバッグする上でどちらがいいかという土俵で考えれば，今のところ圧倒的に標準のリモートデバッグツールの方が優れています。
優れている点を箇条書きでおこすと
早い
Resourcesがちゃんと機能している
scriptタブがちゃんとある
console.logが問題なく動く
ようはデスクトップChromeと同じように使うことができる
最後が一番重要ですね。
weinreは，見た目はdevtoolsと同じなのですが，結構違います。
weinreの悪い点は少なくとも4つほど見つけました。
CSSの問題
スタイルの解釈順番が違ったりして，実際に表示するときに利用しているスタイルとは別のものがハイライトされ，実際に表示しているものをストライクするときがあります。
スクリーンショットのように，一番強いのは#main-content .headerですから，font-weightはnormalになります。
しかしweinreは，font-weight: normalをストライクして，font-weight: boldが機能しているようにdevtools上では表示します。
また，ベンダープレフィックスを無視したり，margin: 5px 0px;をなぜかmargin: 0px;と表示したりします。
スタイル破壊の問題
マウスがオーバした部分を青くしたりするのをHTMLとCSSでやっているわけですが
画面サイズでサイズを変更するようなJavaScriptが動いている場合，その青いエリアでサイズが変わってしまい，うまく動かないことがあります。
まぁこれはHTMLの書き方が悪いとも言えなくもないですが。
consoleオブジェクトの問題
他にも，問題があったのはJavaScriptのconsoleオブジェクトです。
weinreはwindow.consoleを置き換えて，スマートフォンのブラウザコンソールではなく，wenire上のコンソールに表示するという方法をとっているのですが，window.onload時はなぜか置き換えが終了していないため，onload時のconsole出力ができません。
weinreのメーリングリストには，onload前やonloadのハンドラーでconsole表示したいときは，setTimeout(func, 3000)をやるとできるよ！って書いてありました。
iframeが表示されない
さらに，iframe先は表示されません。
そりゃスクリプトで無理矢理DOM情報を取り出しているので，iframe内も取れてしまったら怖いです。当然の結果です。
いくつか悪い点あげたり，Chrome リモートデバッグの方がいいじゃんって言ったりしてますが，もちろんweinreのいい点もあります。
端末側に設定がいらない
インストールするものはweinreだけ，htmlにタグを1つ追加するだけ
端末側の制限が少ない
実際に運用する場合，まだまだAndroid4.0は普及していないし，普及したところで標準ブラウザがChromeになるわけでもないので，Chromeのリモートデバッグを主に使って行くということはしばらくないと思います。
しかし，きっとこういうの出してくるってことはGoogleさんもAndroid向けのChromeで何かやろうとされていることだろうし，OSが4.0なら1度はやってみるといいかもしれません。
Chrome beta for AndroidについてのFAQを翻訳してくれている方がいるので
こちら も見ると色々わかると思います。
そういえばOperaもリモートデバッグできるんだったな... そっちは試していません。
あとiOS Simulatorは，Xcodeのバージョン上げるとXcodeが/Applicationに入るので，
IE Mobileでは動きませんでした！！！！！！！ 引き続き，IE Mobileでも使えるものを探します！！！たぶん！！！
