weinreとngrokを使用したお手軽なAndroid標準ブラウザのデバッグ方法

Android4.4未満ではChromeに繋いでのデバッグができないため、weinreを使用してデバッグします。

前提

• MacOSX
• ngrokがインストールされている
• npmがインストールされている

注意点

• ngrokでweinreサーバを公開するので機密情報があるサイトをデバッグする場合は別の方法(端末を社内ネットワークに接続して直接weinreにアクセスするなど)を検討するべき

1. weinreサーバを起動

• 以下のコマンドでweinreサーバを8888ポートで起動します。

$ npm install weinre
$ ./node_modules/weinre/weinre --httpPort 8888

※ポート指定なしだと8080ポートで起動しますが、Macだと何かと競合するらしくアクセスできませんでした。

2. ngrokでweinreサーバを公開

$ ngrok http 8888
(ローカルで起動した8888ポートのサーバ(weinre)を*.ngrok.ioドメインで公開)

3. PCのブラウザでweinreを開き、ブックマークレットを取得

Chromeなどから http://*.ngrok.io にアクセスし、Target Bookmarkletのセクションにあるブックマークレット文字列(javascript:から始まる文字列)をコピーしてください。

4. Android端末の標準ブラウザにブックマークレットを追加

1. 3で取得したブックマークレットをQRコード経由などでAndroid端末のクリップボードに入れる
2. 標準ブラウザで任意のページをブックマーク追加
3. 追加したブックマークのURLをブックマーク文字列に変更(タイトルもweinreなどに変える)

5. デバッグ対象ページを開き、ブックマークレットを実行し、デバッグ

1. PCで http://*.ngrok.io/client/#anonymous を開く(Remoteタブ)
2. Android標準ブラウザでデバッグ対象ページを開き、4で登録したブックマークレットを実行
3. 正常に実行できればweinreのTargets欄にURLが追加される。
4. ElementsタブやResourcesタブなどでデバッグする(Chromeのデベロッパーツールと同じような感じ)