知らないと損!?Remote Debuggingが個人的にすごかった件。

Web/07 Jun 2015

小ネタです。 Android を使いこなしている人や制作者にとっては知ってて当然らしいのですが、Android を使い始めて 1 ヶ月半の自分にとっては目からウロコでしたよ。

Chrome で Android のデバッグができる

モバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方が良いです。

Remote Debugging on Android with Chrome

Google がちゃんと紹介してくれていました。USB をつないで設定すれば、Android の chrome で開いているページを PC の Chrome と同期して Developper Tools で表示してくれるようになります。以下のようなイメージです。

リモートデバッギング

右が PC で少し切れていますが、Developper Tools が開いているのがわかります。

設定は簡単

まず、以下の条件が必要です。

  • Chrome 32 以上
  • Android 4.0 以上(ブラウザデバッグの場合)
  • USB ケーブルで PC と Android をつないでいること

Google によると、デバッグを行うにはChrome Canaryという、開発者向けに最新機能やこれから搭載される開発中の機能を搭載した Chrome を使うのが良いそうです。

Andoroid に開発者向けオプションを表示させる

Android の設定画面に開発者向けオプションが表示させます。すでに設定している場合は、この設定は必要ありません。 設定自体は簡単で、設定 > 端末情報に進み、ビルド番号欄を7 回タップするだけです。

tap on seven times

USB デバッグを ON にする

USBデバッグ

上図のように、USB デバッグのチェックをオンにして、ダイアログで聞かれる接続許可を OK します。

Chrome でのデバッグ設定

Chrome

chrome のアドレスバーにchrome://inspect/と入力すると、上のような画面が表示されます。Discover USB devices にチェックを入れると、USB 接続されているデバイスを検出し、そのデバイスで表示している Chrome のページ情報を取得します。

モバイルページを表示

inspect をクリックすると PC の Chrome で Andoroid の画面が表示されます。ミラーリングになっているので、どちらかのデバイスでスクロールやページの移動を行えば、もう一方のデバイスも同じように動きます。細かく挙動を確認したり、Developper Tool のエミューレータではない実機での確認となるのでデバッグ精度も確実に良くなります。これは便利です。

開発サーバで動かしているページをモバイルで表示

開発用サーバをローカルで起動している場合、Port forwarding の設定を行うだけで、モバイルからローカルホストにアクセスできるようになります。Rails とか middleman、Wordpress などローカル開発環境で動かしながら制作している場合は特に利用頻度は高くなるです。設定も簡単ですよ。まず、 Port forwarding をクリックし、設定画面を呼び出します。

port-setting

Port には Port 番号を、IP Address or port と書かれた入力欄には、localhost:4567のようなホスト名を入力、Enable port forwarding にチェックを入れ、Done します。これで設定完了です。

Port forwarding の設定が完了すると、先ほど追加したポート名が端末名の右側に表示されます。次に、Open tab with url の入力欄に http://localhost:4567/ のような URL を入れ、Open をクリックして該当ページを開くだけです。

view localhost

USB 接続だけでデバッグできる環境が簡単に用意できる。Chrome のエミュレータとテストサーバにアップして確認を行っていた自分は、これでかなり作業が楽になっています。小ネタですが、個人的にかなり感動したので、知らなかった人には是非おすすめしたいです。快適ですよ。

余談

小ネタついでに少し余談。6 月末に発売予定の Withings のスマートウォッチを買おうか迷っています。

activate pop - withings

Apple Watch、Android wear などスマートウォッチには、全く魅力を感じていなかったのですが、この Withings のは違います。8-month+ battery とあるように 8 ヶ月充電なしで使えるんです。Withings のアプリと連動して健康状態を常に把握できます。

睡眠時に着用すれば、その状態をトラッキングしてくれるし、アラームセットしておけばバイブの振動で起こしてくれるようです。ただ、それ以上に他のスマートウォッチに比べてデザインが秀逸。普段使いの時計としても文句なしですよ。早く発売されないか動向が気になります。


【追記】 ついに発売されたので、購入し「スマートウォッチはこれでしょ。やっと日本で発売された Withings Activite Pop を購入。」というレポート書きました。こちらの記事もよろしくどうぞ。