[Qiita] Androidの実機でPCのlocalhostに接続したり、Webページの要素を検証する
※この記事は以前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
を開く
2. デバイスを繋ぐ
(デバッグの許可を求められたら、許可する)
3. 実機でChromeを開き、要素を検証したいページを開く
開いたページが以下のようにPCのChrome上で表示される。タブが開いている場合は、全てここに表示される。
4. 実際に要素を検証する
開きたいページのinspectボタンを押すと、以下のようにChromeで要素の検証をしたときと同じように実機で開いているページを検証することができます。
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
ボタンを押すと、要素の検証をすることができます。
また、アプリのどの部分にWebViewがあるのか、ページURLの左の部分に濃い灰色で表示されます。
おわりに
Chromeさえあれば簡単にページの要素を検証できてしまうので、とても便利です。
まだ使ったことがない人は、ぜひ使ってみてください。
以上、おつかれさまでした。
参考
Remote Debugging on Android with Chrome - Google Chrome
https://developer.chrome.com/devtools/docs/remote-debugging
コメント
コメントを投稿