Help us understand the problem. What is going on with this article?

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

More than 5 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な感じで。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away