【Android】Chrome DevTools for Mobileが気になったので使い方を調べてみた

スポンサーリンク

HTML5 ROCKSで掲載されていた記事が気になったので

Chrome DevTools for Mobile: Screencast and Emulation

実際、モバイルのデバッグというのは実機を持ちだして画面を見れば、目視は出来るわけです。

ただ、ちょっとした修正をリアルタイムで反映して確認できたりすると便利です。

Chrome DevTools for Mobileは1年半くらい前にすでに発表されているのですが、色々機能が増えているようです。

新しい機能はChrome canary版にて提供

Chrome DevTools for Mobileの新機能は現状「Chrome canary」というナイトリーリリース版にて提供されています。

こちらの機能を試したい場合は「Chrome canary」をインストールスル必要があります。

※chrome canaryはMacとWin版のみがリリースされています。Linux版はありません。

こちらをインストールすると確認できるようになります。

ADBがなくても簡単確認

以前のChrome DevTools for Mobileでは、確認するにChromeにプラグインを入れたり、Androidの開発者キットをインストールしたりと試用するには結構めんどくさい手順が必要でした。

今回の新しい機能ではそんなことしなくても簡単に接続できます。

スクリーンキャスティング

USBドライブで接続したスマートフォンにサイトを表示させながら、PCブラウザのDevtoolにて確認できる方法です。

これは、接続する端末が Android 4.4 (kitKat)である必要があるみたいです。

※以下画像は、MacにてChrome Carnaryを使用しています。

まずChrome canaryを起動してURLの欄に「chrome://inspect」と入力するか、右上のメニューボタンから「ツール > デバイスの検証」を選択します。

以下のようなページが起動。

Nexus5_add

ここで、端末をUSB接続。端末側は「開発者モード」になっており、USBデバッグを許可する必要があります。

認識されると、上の画像のように端末名が表示されます。

一応、Glaxy Nexus(Android4.3)も認識されますがスクリーンキャスティングは利用できませんでした。

galaxy_nexus

試用する際は、チェックしたいページを「open tab with URL」とあるボックスへ入力し、「open」です。

すると、入直したURLのページが下の方に追加されます。

あとは、「inspect」をクリックすると、端末側のブラウザでwebページが表示されます。

持っている端末時だけじゃなく、いろんなAndroid&iPhoneもエミュレート

と、多数のエミュレートをしてくれています。

画面サイズや、ユーザーエージェント、センサー関連もエミュレートしてくれています。

表示の仕方は、「デベロッパーツール」を起動し、「Sources」タブにて、エスケープボタン。で出てきます。

なんか、微妙な方法ですが、これでツールバーが出てきます。そこで、「Emulate」とすると、スタートです。

もしかしたら、もうちょっとちゃんとした表示方法あるかもです。

で、実際使っている様子。HTML ROCKSで紹介されていたYoutube動画

こちらは、実際起動した画面。

emulate

さらにHTML ROCKSにて紹介されているスマートフォンでのタッチ&ドラッグのエミュレーティング。

scrolling-emu

ローカルで公開していないサイトでも端末で表示可能

以上の機能意外にもUSB接続した端末で、ローカルにあるサイトを表示することも可能です。

試用する場合は、ローカルのアドレスを「port forwarding…」をクリックして入力。

port

ローカルのアドレスを入力して、「Done」すると、ローカルアクセス可能を示す緑ランプが点灯します。

onport

こちらの機能は、Android 4.4 (KitKat)でなくても、使用できました。Galaxy Nexus にて確認できました。(2013年12月6日現在)

ADBと連携しなくてもいろんなことができちゃうので、「黒い画面」が苦手なデザイナーさんとかでも簡単にチェックが出来るようになりそうです。

スポンサーリンク

シェアする

フォローする

スポンサーリンク