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

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Develop Document Jekyll