alt

スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマートフォン用ベージをデバッグする5つの方法


これらの記事みて自分の開発環境にもweinreを取り入れようと思い試してみました。

加速度センサーやGeo Location APIなんかのデバッグにも
PCのブラウザコンソールからCSSやJS弄ったりするのにもちょー便利。
iPhone、Android問わず、クロスデバイスで利用できるし。


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
【localhost上でデバッグする】

１．下記サイトから「weinre-jar-1.5.0.zip」をダウンロード。
https://github.com/phonegap/weinre/archives/master

２．展開したフォルダを適当な場所に置く。

３．コマンドプロンプトでフォルダまで移動して「java -jar weinre.jar –httpPort 8080」を実行。


４．ブラウザで「http://localhost:8080/」にアクセス。

５．赤枠のブックマークレットをブラウザに登録。
※JSをデバッグ対象のサイトに埋め込んでもOK。


６．デバッグページを開く。
例）http://localhost:8080/client/#anonymous

７．シュミレータか新規ウィンドウを立ち上げて、デバッグしたい対象のページを開く。
（実機で確認したい場合は同一ネットワークの設定が必要）
例）http://www.google.co.jp/

８．さきほどのブックマークレットを実行するとデバッグ画面のTargetsがnoneから緑色のテキストに変わる。
ソケットにつながったのでゴリゴリデバッグ開始。

※対象のページにprototype.jsのバージョン1.7以前があるとエラーを起こす。



－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
【weinreのWEBサービス上でデバッグする】

実はわざわざローカルでjarを展開しなくても、weinreのWEBサービス（API）を利用すれば、
実機で直接サイトにアクセスしてリモートデバッグが可能。

１．http://debug.phonegap.com/にアクセス。

２．Step 1の入力フィールドに任意の文字列を入れる。

３．Step 2のJSをコピペしてデバッグ対象のサイトに埋め込む。

４．Step 3のデバッグページを開く。

５．スマートフォンで対象のサイトにアクセスする。

６．デバッグページのDEVICESのnoneが変わればゴリゴリデバッグ開始。