あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2016年9月15日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

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

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

必要な環境

  • ・node.js
  • ・WIFI環境

weinreの使用方法

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

まとめ

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

スポンサーリンク