Edited at

今さらだけどweinreを使ったリモートデバッグを復習してみる

More than 3 years have passed since last update.

ここでやりたいことは


  1. ケーブルレスでリモートデバッグ

  2. Cordova/PhoneGapなスマホアプリのデバッグ

  3. OS、ブラウザの縛りなし

です。

ブラウザがネイティブでサポートしてくれるようになってずいぶんリモートデバッグも楽になってきました。

しかし、iOSにしてもAndroidにしてもケーブルで接続しないといけない。めんどくさい。。ケーブル挿したくないし。

Cordova/PhoneGapを使ったハイブリッドアプリとかは対応してないし。

と考えたところ原点回帰とはいいませんがやはりweinreに行きつくのかな。

weinreが登場する前は自力でsocket使ってjavascript送りつけてたなぁ(遠い記憶

そんなわけで久々にweinreを使ってみました!な覚書です。

覚書するほどでもないですがw

weinreって何者?というところはどこか他のところで見てもらえばいいです。

例えばweinre -Homeとか。

とはいえ簡単に説明しておきましょうかね。


一言でいえば「ブラウザ版リモートデバッギングツール」でしょうか。

リモートでWebインスペクタが使えるってやつです。


デバッガといっても単なるWebインスペクタ。なので、weinre -Homeにもあるようにケーブル接続すれば


  • AndroidでChromeならWindowsやOS XのChrome

  • iOSでSafariならOS XのSafari


  • でデバッグ可能なんです。でもケーブル接続が嫌なんです(`・ω・´)
    そしてCordova/PhoneGapなアプリのデバッグもしたい。。

ではでは、変な前置きが付きましたがやっとweinreの導入に移ります。


weinreの導入

weinreはnode.js上で動きます。

そのためweinreに先行してnode.jsをインストールしておく必要があります。


node.jsの導入

node.jsのオフィシャルサイトに行けばインストーラがあります。

それを使ってサクッとインストールしてください。


weinreの導入

「導入」というと大層な作業が必要そうですが、npmの管理下にあるのでコンソール(Windowsだとコマンドプロンプト)で1コマンド叩けばおわりです。

npm install weinre

たったこれだけ。なんてお手軽。


weinreの起動

導入できたら起動させましょう。

実用的には「--boundHost」(※)とかのパラメータつけないとですが、とりあえず動かしましょうってことでパラメータなんもつけてません。

※ホスト名を設定するパラメータで、設定しない場合「localhost」でのアクセスになります。なので同じネットワークにいる場合でも他の端末からアクセスできません。

 ちゃんとリモートデバッグしたければ「--boundHost (IPアドレスとか)」なオプションつけて起動してください。


OS_X

./node_modules/weinre



Windows

node_modules\.bin\weinre.cmd



weinreを使ってみる

ブラウザでhttp://localhost:8080/にアクセスしましょう。

下の方にある「Target Bookmarklet」というセクションがあるので、そこに記載されているscriptをコピーします。

あとはデバッグ対象のページを開いているブラウザでブックマークレットを実行するのみ。

ブックマークレットはアドレスバーに貼り付けて実行すると動作する簡易スクリプトです。

ただ、chromeはセキュリティ観点からかそのまま貼り付けてもご丁寧に「javascript:」な部分をカットしてくれます。

なので、事前に「javascript:」を入力してから貼り付けてください。

ここまでできたらhttp://localhost:8080/なページを開いている方に戻って「Access Points」セクションにあるリンクを開きます。

「Targets」にブックマークレットを実行したページがあるはずなので、そのリンクをクリック。

はい、これでリモートデバッグ(リモートでWebインスペクト)できるようになりました。

めでたしめでたし。

補足:止めるのはCtrl + Cな感じで。