Edited at

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

More than 3 years have passed since last update.


はじめに

実機で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のみのダウンロードをします。



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



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

    cd [任意のディレクトリ]/android-sdk-macosx/tools
    



  4. androidというシェルスクリプトを起動する

    ./android
    


  5. Android SDK Managerが起動するので、Android SDK Platform-toolsのみにチェックを入れて右下のinstallボタンを押す



  6. 同意してインストールする



  7. 完了したらCloseを押してAndroid SDK Managerも閉じる




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 を開く



2. デバイスを繋ぐ

(デバッグの許可を求められたら、許可する)



3. 実機でChromeを開き、要素を検証したいページを開く

開いたページが以下のようにPCのChrome上で表示される。タブが開いている場合は、全てここに表示される。



4. 実際に要素を検証する

開きたいページのinspectボタンを押すと、以下のようにChromeで要素の検証をしたときと同じように実機で開いているページを検証することができます。


localhostに繋ぎたいとき



  1. Port forwarding…ボタンを押す



  2. ポートの設定が出てくるので、左側に実機側で開くポート、右側にPC側で開いているポートを指定し、Enable port forwardingにチェックを入れて、Doneを押す

    (デフォルトでは8080のみ設定されているはず)



  3. 緑色の丸がついているか確認する



  4. 実機で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ボタンを押すと、要素の検証をすることができます。

また、アプリのどの部分にWebViewがあるのか、ページURLの左の部分に濃い灰色で表示されます。


おわりに

Chromeさえあれば簡単にページの要素を検証できてしまうので、とても便利です。

まだ使ったことがない人は、ぜひ使ってみてください。

以上、おつかれさまでした。


参考


Remote Debugging on Android with Chrome - Google Chrome

https://developer.chrome.com/devtools/docs/remote-debugging