スマホの実機をweinereでリモートデバックする方法

スマートフォンが普及して数年経ちましたが、普及と共にスマートフォンページも当たり前の存在となりました。
スマートフォンでページが最適化されているかが重視されるようになり「モバイルフレンドリー」という言葉も登場しました。

そんなスマホページをコーディングしている時、Chromeなどに備わっているデベロッパーツールによるデバックは必要不可欠です。
「まずはPCブラウザによる開発環境でコーディングチェックした後に実機で確認する」という流れで制作をしている方も多いのではないでしょうか？しかし、PCブラウザの開発環境では問題ないのに、なぜか実機で見ると崩れている。そんなことが、ごく稀に発生します。

そして、経験上この手の崩れは根が深く、解決するのに時間がかかります。
「ああ、こんな時にスマホの実機を直接デバックをできたらいいのになあ」
などと思った時に助かるのが「weinre」というツールです。これは、PCブラウザ上のデベロッパーツールでスマホの実機をデバックできる優れものです。

必要な環境

• ・node.js
• ・WIFI環境

weinreの使用方法

長くなるので下記の記事を参照してください。
http://zephiransas.github.io/blog/2013/08/20/debug-with-weinre/

まとめ

初めて使用する場合は独特の手順が必要なので少々戸惑うかもしれませんが、どうしても崩れが解決できない時の最終手段として有効です。私は、崩れの原因箇所の特定として活用しています。奥の手として、このツールを知っておくのは非常に有意義だと私は思います。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。