mitmproxyで自動的にweinreを読み込ませるスクリプト書いたのでモバイルのデバッグが捗る

今さらなネタばかりですいません。

背景

2017年4月現在では Safari, Chrome に remote debug の機能が入っているので、対応している環境ではこれを使うことでスマホのブラウザの挙動に対しても効率的にデバッグできるようになってきている1。

が、なんかどうも安定しないし、例えば Windows からは Safari のリモートデバッグ使えるのかなぁ？

ということで環境を選びにくい古の weinre なわけだけど、これの何が問題って

  1. weinre の script を serve しなければいけない
  2. デバッグしたい HTML に <script> を書いて weinre のコードを読み込ませる必要がある

ところ。

対策

実はもう何年も前に思いついてはいたんだけど、誰か作ってるでしょと思ったら見つけることができず、どうでもよくなって放置していたんだけど、上の問題は

  • weinre を serve するサーバパッケージを用意する
  • local proxy サーバで HTML を書き換えてあらゆる HTML で自動的に weinre を読み込む <script> を入れる

ことで解決する。

準備

ということで作った。

まずは以下の道具を用意。

weinre はいつの間にかそれ専用の weinre コマンドが npm 上にできてたので、

$ npm install weinre -g

mitmproxy は Python で書かれているので普段 Python を使っている人は pip でもいいし、使ってない人はバイナリパッケージがあるのでそれを使うといい。Homebrew 使ってる人は

$ brew install mitmproxy

がいちばん簡単。

スクリプト

使い方

1) weinre を localhost 以外の IP アドレスで起動する

localhost でしか listen しないと weinre を起動した PC からしか繋がらない。

$ weinre --boundHost 192.168.0.5 --httpPort 8282

みたいな感じ。

2) スクリプトを読み込みながら mitmproxy を起動

この時、1 で起動した weinre の情報を与えてやる。上の例で言うと

$ mitmproxy -s "weinre.py 192.168.0.5 8282"

になる。

weinre も mitmproxy もデフォルトでは 8080 で立ち上がろうとするので、どちらかには port を明示的に指定して譲らなければいけない。

※ mitmproxy は https も proxy できる。mitmproxy で証明書を発行して、クライアントとなる OS、ブラウザにこの証明書をインストールする。この手順は十分簡単なので、公式のドキュメントを参照のこと。

3) ブラウザの proxy 設定で mitmproxy を指定する

これは各ブラウザの設定方法を参照。

これであらゆるサイトについて weinre の機能でリモートデバッグできるようになった。便利。

weinre の使い方についてはバッサリ割愛。

  1. Android 4.4+ / iOS 6+ ↩

More