[Tips] 【Remote Debugging on Android】アップデート

以前、こんなエントリーを書いていたのですが、いつの間にか、使い方が結構変わっていたので、またまとめておきます。

まずはおさらい。
Remote Debugging on Androidとは、PCと接続したAndroid端末で、現在表示中のChromeブラウザのページ要素を解析したりするときに使う、WEBページやWEBアプリ製作者向けの機能です。

で、この機能が便利なのですが、あまり周りで使っている人の話を聞かない(私の周りにWEB関連の開発者が少なすぎる、というだけかもしれませんが)ので、使い方をまとめたのが約半年前に書いたこのエントリーでした。

で、私の場合はWEBサイトの開発は主要業務ではないため、それほどこまめに端末上のページソースをチェックしないこともあって、しばらく使っていなかったのですが、先日、久しぶりにタブレット版のWEBサイトのソースをチェックしようと開こうとしたら使い方が結構変わっていたのでそのまとめをしておきます。

本家の解説ページのURLは変わっていません。
https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ja

そして前提条件も以前と変わらず
・PCにAndroidSDKがインストールされている事。
・PCとタブレットの両方で、Chromeが使える事。
・タブレット端末がUSBでバッギングモードが利用でき、PCに端末のドライバがインストールされている事。
ですね。
前回も紹介しましたが、アプリ開発者でない人は、AndroidStudioをPCにインストールすればOKだと思います。

さて、では、変更された使い方を見ていきます。(以下、画像はすべてWindows7およびNexus7の物です。端末や環境によって、メニュー項目が若干異なるかもしれません)
ADBのインストールなどは終わっているものとみなしますので、本家サイトのこちらの項目からの説明とお考えください。

まずは、タブレットまたはスマートフォン(以下、「端末」)の「設定」を開き、「開発者向けオプション」→「USBデバッグ」にチェックを入れます。
画像

画像

画像


また、「USBでパソコンに接続」を確認し「メディアデバイス」になっている方は「カメラ」を選択してください。
画像


上の2つの状態が設定が終われば、Windowsの「スタートボタン」→「すべてのプログラム」→「アクセサリ」から「コマンドプロンプト」を実行し、[ adb devices ]と入力して、実行します。
実行結果に、自分の端末番号と「device」というリストが1行(複数台の端末をつないでいる場合は複数行)表示されれば準備完了です。
画像

画像


(この時、端末上に「USBデバッグを許可しますか」と問い合わせが表示される場合があります。このダイアログが表示された場合は「OK」をタップしてください。)
画像


続いて、まずはPC側でChromeブラウザを起動し、URL入力欄に[ about:flags ]と入力します。(端末側ではありませんのでご注意ください。)
すると、次のような見慣れない画面が表示されます。タイトルにかなり強めの警告が表示されていますが、ここは開発者として恐れず、先に進みましょう。
画像


さて、私が始めに戸惑ったのはこの画面の項目でした。
日本語版のChromeを使っていると、このページ自体は上の図のように日本語で表示してくれます。
しかし、先ほどから確認している本家の解説サイトは英語しかないうえ、解説画像も英語。おまけに、Chromeのページ自動翻訳機能を使った場合、実際に表示されている日本語のページとは似ても似つかぬ日本語にしか翻訳されません…。
ということで、これならいっそのこと英語のままにしておいてくれればいいのに、といった具合で戸惑いました。

では、該当項目を探しましょう。
本家の解説ページを見ると、「Enable Developer Tools experiments」という項目を探すように書かれています。
しかし、端末上は日本語で標記されているため、これがなんという名前の項目なのかがわかりません。
しかし、よくよく見ると、日本語で書かれている方も各項目の最後についている「#」以降のタグは英語で書かれているようです。
ということで、解説ページにある項目名ではなく、項目の最後に書かれているタグ「#enable-devtools-experiments」を頼りに、ページ上で該当項目を探します。

項目数が結構多いので、「ページ内検索」を使い、[ devtools ]と入力すれば見つかるはずです。
日本語名は「デベロッパーツールのテストを有効にする」という項目になっているようです。
初期状態ではこの項目が灰色に反転しているため、項目下段にある「有効にする」のリンクをクリックし、項目を有効にします。
画像


すると、灰色の反転が解除され、画面下部に「変更内容は次にGoogleChromeを再起動したときに有効になります」というメッセージが表示されるので「今すぐ再起動」をクリックします。
現在表示しているタブなどの情報は基本的にそのまま保持されますので、(何か入力中の物は保存しておいた方がいいかと思いますが)すぐに再起動をしましょう。
画像


これで、PCのChromeでデベロッパーツールが使えるようになりました。
続いて、PCのChromeのURLエリアに[ about:inspect ]と入力します。
画像


Enterキーを押して決定すると、自動的に「chrome://inspect」というURL表記に変わり、現在接続されている端末の一覧が表示されます。
画像


この時、端末名の下には、現在、端末のChrome上で開いているタブの一覧が表示されていますので、このリストの中の「inspect」をクリックすると、次のような画面が表示され、現在端末で表示しているページのソースや要素を確認することが出来ます。
画像


本家の解説ページでは、この画面上でポートフォワード関連の設定がもうひと手間必要、ということで書かれているのですが、私の環境ではこの手順は不要でした。ADBをすでに使っていた関係からか、この端末が仕事場のPCで一度この手順の設定をしてしまったからか、またはChromeがアップデートされ、解説ページと手順が微妙に変わっているのかは不明ですが、もし、「inspect」をクリックすることが出来なかったり、表示されていなかった場合は、解説ページの手順に従って操作してみてください。)

もちろん、PC版Chromeの「要素を検証」機能と同じで、PC上に表示されているソース画面でマウスやカーソルを合わせた個所を、端末画面上で枠で囲んで表示してくれます。
画像

画像


ということで、知っていると便利なRemote Debugging on Androidの使い方の紹介でした。

ちなみに、この機能の途中で表示された隠しページのような「about:flags」ページをよく見ると、他にもいろいろと興味深そうな機能が、現在開発中のようです。興味のある方はそちらを調べてみるのも一興かもしれません。

ではでは。

===========================気になる情報
「パパとお風呂」で10歳娘の養育権剥奪、ナイフ振り回し抵抗の中国人男性、射殺される―米国

Google、Android用のUIテスト自動化フレームワーク「Espresso」公開


Googleが日本のAndroidデベロッパーのための公式Google+コミュニティ「Android Development – Japan」を開設


OpenGLを使った地図描画エンジンの作り方(1)

XMLをパース(解析)する

3Dモーションセンサ※3を開発、発売

米Microsoft、Windows 8.1アプリ公式プログラミング書のプレビュー版をPDF形式で無料公開

無料でiOS・AndroidからWindowsを遠隔操作できるMicrosoft公式のリモートデスクトップアプリ「Microsoft Remote Desktop」の使い方


Googleが気球を使ってどこでもWi-Fiによるネット接続を可能にする「Loon」の受信アンテナ公開、壮大な計画の一端が明らかに


【ギーク向け】3,000円Linux PC「raspberry pi」でiBeaconビーコンを自作する方法


Beginning Android Programming: Develop and Design
Peachpit Press
Chris Haseman

amazon.co.jpで買う
Amazonアソシエイト by Beginning Android Programming: Develop and Design の詳しい情報を見る / ウェブリブログ商品ポータル



Android UI Fundamentals: Develop & Design: Develop & Design (Develop and Design)
Peachpit Press
2012-02-22
Jason Ostrander

amazon.co.jpで買う
Amazonアソシエイト by Android UI Fundamentals: Develop & Design: Develop & Design (Develop and Design) の詳しい情報を見る / ウェブリブログ商品ポータル



この記事へのコメント

この記事へのトラックバック

テーマ別記事