[Qiita] Androidの実機でPCのlocalhostに接続したり、Webページの要素を検証する

2月 22, 2016

※この記事は以前Qiitaに投稿されていた古い記事です

はじめに

実機でPCのlocalhostに接続したいときや、実機で見ているWebページの要素を検証したいことがあったので、その方法をメモとして書いておきます。

必要なもの

Android

Android 4.0以上
最新のChrome

PC

Chrome 32以上
Android SDK
- SDKが必要というよりはadbが必要なので、既にSDKが入っている場合はadbにパスを通しておくだけで良いです。
- ※ Chrome拡張で「adb」というものがありますが、現在は非推奨になっているため、ここでは使いません。

Android SDKをインストールする

手元にWindowsが無いため、今回はMacの説明のみ書きます。
既にAndroid SDKが入っている場合は、この手順は必要無いです。

Android SDKをダウンロードする
ここから、自分の環境のAndroid SDKをダウンロードします。
今回はadbのみ必要なため、SDKのみのダウンロードをします。
ダウンロードしたzipを任意の場所に置き、zipを解凍する
ターミナルでダウンロードしたSDKのディレクトリ配下のtoolsディレクトリを開く
```
cd [任意のディレクトリ]/android-sdk-macosx/tools
```
androidというシェルスクリプトを起動する
```
./android
```
Android SDK Managerが起動するので、Android SDK Platform-toolsのみにチェックを入れて右下のinstallボタンを押す
同意してインストールする
完了したらCloseを押してAndroid SDK Managerも閉じる

adbにパスを通す

先ほどのインストールでplatform-toolsというディレクトリが生成されているはずなので、そこにパスを通します。

~/.bash_profileを開く
```
vi ~/.bash_profile
```
以下のようにSDKのディレクトリ配下のplatform-toolsディレクトリにパスを通す
```
export PATH=$PATH:[SDKのディレクトリ]/platform-tools
```
もしAndroid Studioと一緒にSDKをインストールした場合は、以下のディレクトリにパスを通す
```
export PATH=$PATH:~/Library/Android/sdk/platform-tools
```
保存して変更を反映する
```
source ~/.bash_profile
```
adbコマンドを打ってみて、ヘルプが表示されれば完了

実機でWebページの要素を検証する

実機のUSBデバッグを有効にする

設定から端末情報を開き、ビルド番号を7回タップして開発者向けオプションを有効にする
設定から開発者向けオプションを開き、USBデバッグを有効にする

Webページの要素を検証する

1.　PCのChromeで chrome://inspect/#devices を開く
スクリーンショット 2016-02-16 10.42.49.png
2. デバイスを繋ぐ
(デバッグの許可を求められたら、許可する）
スクリーンショット 2016-02-16 10.49.02.png
3. 実機でChromeを開き、要素を検証したいページを開く
開いたページが以下のようにPCのChrome上で表示される。タブが開いている場合は、全てここに表示される。
スクリーンショット 2016-02-20 23.37.38.png
4. 実際に要素を検証する
開きたいページのinspectボタンを押すと、以下のようにChromeで要素の検証をしたときと同じように実機で開いているページを検証することができます。
スクリーンショット 2016-02-21 0.00.07.png

localhostに繋ぎたいとき

Port forwarding…ボタンを押す
ポートの設定が出てくるので、左側に実機側で開くポート、右側にPC側で開いているポートを指定し、Enable port forwardingにチェックを入れて、Doneを押す
(デフォルトでは8080のみ設定されているはず）
緑色の丸がついているか確認する
実機でlocalhostに接続してみる

接続出来たら成功です。
あとは、同じようにlocalhostを開いているタブをinspectすることで、localhostでも要素の検証をすることができます。

WebViewで開いているページを検証する

WebViewで開いているページも同様に、要素の検証をすることができますが、以下の2つの条件を満たしている必要があります。

Android 4.4以上であること
WebViewのDebuggingが有効になっていること

WebViewのDebuggingを有効にする

WebViewのDebuggingを有効にするには、以下のコードをWebViewを使っている箇所に入れます。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

WebViewのDebuggingはManifestのデバッグフラグに影響されないため、Manifestのデバッグフラグがtrueの場合のみWebViewのデバッグをtrueにするには、以下のようにします。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE)) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

実際にWebViewをinspectする

WebViewを使用しているアプリを起動してWebViewで何かページを開いてみると、WebView in [パッケージ名]のように、どのアプリで開いているWebViewなのかが表示されるので、同じようにinspectボタンを押すと、要素の検証をすることができます。
スクリーンショット 2016-02-21 3.14.19.png

また、アプリのどの部分にWebViewがあるのか、ページURLの左の部分に濃い灰色で表示されます。
スクリーンショット 2016-02-21 3.14.20.png

おわりに

Chromeさえあれば簡単にページの要素を検証できてしまうので、とても便利です。
まだ使ったことがない人は、ぜひ使ってみてください。
以上、おつかれさまでした。

参考

Remote Debugging on Android with Chrome - Google Chrome
https://developer.chrome.com/devtools/docs/remote-debugging

このブログを検索