Chromeデベロッパーツールのモバイル向けデバッグ機能について

| コメントをどうぞ

つい最近まで知りませんでしたが、バージョン33以降のChromeのデベロッパーツールにモバイル向けのデバッグ機能として搭載された「エミュレーション機能」と「リモートデバッギング機能」が便利だったので紹介したいと思います。

エミュレーション機能

デベロッパーツールの起動

デバッグしたいページを開いた状態で、Ctrl+Shift+i(Macの場合はCommand+Option+i)を押して、デベロッパーツールを開きます。
show-devtools

エミュレータの起動

デベロッパーツールの右上のコンソールアイコンを押してコンソール開き、「Emulation」タブを選択します。
show-emulation
「Device」をクリックしてデバイス一覧からデバイスを選択して「Emulate」ボタンを押してエミュレータを起動します。

スクリーン設定

デバイス一覧に対象のデバイスがなければ、スクリーン設定タブで解像度、ピクセル密度を個別に設定することも可能です。
screen-setting
CSSのメディアクエリでスクリーンサイズやピクセル密度を使っている場合もきちんと判定されるのでこのあたりの設定がエミュレータで細かくできるのは便利です。

また、エミュレータ画面上でShiftを押しながらスクリーンをドラッグすることで、ピンチ操作も可能です。

pinch-operation

解像度設定の「⇄」をクリックすることで、スクリーンを回転させることもできます。
orientation-change

リモートデバッギング機能

以前のデベロッパーツールでもSDKをインストールすることで、Android実機のデバッグが可能でしたが、SDKをインストールしなくてもデバッグが可能になりました。

モバイル実機のUSB接続

モバイル実機(Android)の開発者オプション設定画面で「USBデバッグ」を有効にします。
usb-debug-setting
次にモバイル実機とPCをUSB接続し、PC側でChromeのアドレスバーに以下のアドレスを入力し設定画面を開きます。

chrome://inspect/

デバイス名が表示されれば接続成功です。
inspect-device-list
モバイル側で現在開いているページの一覧の中からデバッグしたいページの「inspect」をクリックするとインスペクタが起動します。
inspect-device
このインスペクタ画面上で、ローカルページ
と同様のデバッグが可能になります。もちろんHTML、CSS、JavaScriptのデバッグだけでなく、ネットワークやローカルストレージ等のリソースのデバッグも可能です。
また、右上のスクリーンキャストアイコンをクリックすると、モバイル側のスクリーンをキャストして開発PC側からページを操作してデバッグすることも可能です。
screencast-debug

おわりに

今までのエミュレータはSDKのインストールが必要で動作が重たかったり、デバッグ機能がそもそも無かったり、あるいは貧弱だったりして使いにくい面もあったかと思います。使い慣れている強力なChromeのデバッグ機能を使って、モバイルエミュレータや実機を通じてデバッグができるようになったのは、色々なツールを使わなくても良くなるという意味でも非常に有難いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>