weinreを使ったリモートデバッグの手順

macでの手順(mampは起動しておく)
ユーザールートに「.weinre」ディレクトリを作る。
その中に「server.properties」というファイルを作る。

そのファイルの内容:
% cat .weinre/sever.properties
boundHost: -all-
httpPort: 8081

ダウンロードしたweinreを起動(mac用)
ブラウザからhttp://[IPアドレス]:[ポート番号]を叩く。
IPアドレスは「システム環境設定」「ネットワーク」のwifiが接続しているアドレス。
ポート番号は先ほどのファイルで書かれていた番号「8081」
表示されれば起動OK

2015/4/21追記—————

ターミナルでusr/local/bin/へ行く。
(cd と lsを使って。)

node    npm    weinre が見つかる。そしたら
user-no-MacBook-Pro:bin user$ weinre –boundHost 192.168.0.4と打って
(IPアドレスは「システム環境設定」「ネットワーク」を参照。)
2015-04-21T04:10:29.814Z weinre: starting server at http://192.168.0.4:8080と出たら
http://192.168.0.4:8080をブラウザで叩けば、weinreにアクセス出来る。

———————————–

pc側の準備完了

スマホ操作
スマホのブラウザからhttp://[IPアドレス]:[ポート番号]を叩く。
pcと同じ画面が出れば、成功。
(ブックマークを登録しておく)
表示されたページ上の「bookmarklet url in a textarea」の
javascriptコードをコピーしてスマホのurl窓に貼り付け「実行」。
(これもブックマークを登録しておく)
次からは二つのブックマークを順に叩けば実行できる。

(この間ちょっと時間がかかるかも。)
———-2015 4/21追記———————
ブックマークレットをしなくても、
デバッグしたいページに<script src=”></script>で下のコードをリンクさせればデバッグ出来る。
weinre_03
——————————–
pc側のインスペクタ画面(firebugみたいな感じ)を見る。

「Target」「Client」が緑色に変わる。

接続成功!

あとはfirebugみたいに操作できる。

ページを移動したら、接続が切れるので、
登録した二つのブックマークを再度叩く。
(スリープでも切れるので、usbでつないだ後、設定で切っておく)

コメント