[Qiita] Androidの実機でPCのlocalhostに接続したり、Webページの要素を検証する

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

はじめに

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

必要なもの

Android

PC

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

Android SDKをインストールする

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

  1. Android SDKをダウンロードする
    ここから、自分の環境のAndroid SDKをダウンロードします。
    今回はadbのみ必要なため、SDKのみのダウンロードをします。
    スクリーンショット 2016-02-16 10.01.20.png

  2. ダウンロードしたzipを任意の場所に置き、zipを解凍する

  3. ターミナルでダウンロードしたSDKのディレクトリ配下のtoolsディレクトリを開く

    cd [任意のディレクトリ]/android-sdk-macosx/tools
    
  4. androidというシェルスクリプトを起動する

    ./android
    
  5. Android SDK Managerが起動するので、Android SDK Platform-toolsのみにチェックを入れて右下のinstallボタンを押す
    スクリーンショット 2016-02-16 10.09.11.png

  6. 同意してインストールする
    スクリーンショット 2016-02-16 10.09.52.png

  7. 完了したらCloseを押してAndroid SDK Managerも閉じる
    スクリーンショット 2016-02-16 10.10.32.png

adbにパスを通す

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

  1. ~/.bash_profileを開く

    vi ~/.bash_profile
    
  2. 以下のようにSDKのディレクトリ配下のplatform-toolsディレクトリにパスを通す

    export PATH=$PATH:[SDKのディレクトリ]/platform-tools
    

    もしAndroid Studioと一緒にSDKをインストールした場合は、以下のディレクトリにパスを通す

    export PATH=$PATH:~/Library/Android/sdk/platform-tools
    
  3. 保存して変更を反映する

    source ~/.bash_profile
    
  4. adbコマンドを打ってみて、ヘルプが表示されれば完了

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

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

  1. 設定から端末情報を開き、ビルド番号を7回タップして開発者向けオプションを有効にする
  2. 設定から開発者向けオプションを開き、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に繋ぎたいとき

  1. Port forwarding…ボタンを押す
    スクリーンショット 2016-02-21 0.19.21.png

  2. ポートの設定が出てくるので、左側に実機側で開くポート、右側にPC側で開いているポートを指定し、Enable port forwardingにチェックを入れて、Doneを押す
    (デフォルトでは8080のみ設定されているはず)
    スクリーンショット 2016-02-21 0.54.35.png

  3. 緑色の丸がついているか確認する
    スクリーンショット 2016-02-21 0.58.07.png

  4. 実機でlocalhostに接続してみる
    bullheadMMB29Qusr020050002212016005742.png

接続出来たら成功です。
あとは、同じように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



コメント

人気の投稿

[Qiita] Google Playのクローズドベータ版テストでメールアドレスを指定して公開する

【Linux】Linuxでディレクトリ毎にzip圧縮する