Web開発をする時によく使うChromeのデベロッパーツール（開発者ツール、devtools、F12で出てくるやつ）ですが、以下の組み合わせでも使えます。
- Androidのエミュレーター
- 端末エミュレーター上で動くChrome
- 端末エミュレーター上で動くアプリ内のWebView
すごいですね。
ほぼ実機と同じやり方でできるのですが、逆に実機でやらないといけない事はやらないといけないです。毎回やるものではなくて忘れがちなので備忘録として残しておきます。
動かない時のチェックリストとして使ってください。
手順0 ネットワーク設定
WebViewをデバッグしたいので、まずはインターネットにつながる状態でエミュレータを起動しないといけないのですが、DNS設定が原因でネットワークにつながらない事があります。
起動時にコマンドで指定するやり方もありますが、毎回面倒なのでホストマシンのdnsをいじる方式が良いと思います。
手順1 WebViewのデバッグ設定をONにしておく
アプリでWebViewを使う時のオプションでデバッグ設定をONにする必要があります。
Remote debugging WebViews - Chrome Developers
Debug WebViews in your native Android apps using Chrome Developer Tools.
developer.chrome.com
プラグイン等を使っている場合は、そちらにオプションが無いか確認しましょう。以下はFlutterのflutter_inappwebviewの例です。
GitHub - pichillilorenzo/flutter_inappwebview: A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window. - GitHub - pichillilorenzo/flutter_i
github.com
initialOptions: InAppWebViewWidgetOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)
),手順2 エミュレータを起動する
Android Emulator 上でアプリを実行する | Android デベロッパー | Android Developers
Android Emulator は Android デバイスをコンピュータ上でシミュレートします。複数のデバイスを用意しなくても、さまざまなデバイスと Android API レベルでアプリをテストできます。
developer.android.com
ここはあまり本題ではないので、軽く流します。
いつものやり方で起動してください。
手順3 開発者向けオプションを有効にする
実機だとやってるけど、エミュレーターだと忘れがちな設定です。
実機と同じくUSBデバッグ機能を使えるようにするために、エミュレータでも設定が必要です。
ビルド番号を連打するやつです。
このファミコンの裏技みたいな設定の仕方、なんなんでしょうねw
デバイスの開発者向けオプションを設定する | Android デベロッパー | Android Developers
アプリ パフォーマンスのプロファイリングやデバッグに役立つシステム動作の設定を行う方法について説明します。
developer.android.com
手順4 アプリを起動する
起動します。
WebViewの画面を開きます。
手順5 Chromeの端末一覧ページを開く
ホストマシンのChromeで
chrome://inspect/#devicesを開きます。
うまくいっていれば、エミュレータの端末が見えているはずです。
「inspect」をクリックします。
いまくいけばこうなります。
enjoy!
コメント