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

Remote Debugging
Chromeより

小ネタです。
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 のスマートウォッチ、ACTIVITE POPを買おうか迷っています。

activate pop - withings

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

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


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

関連記事