Chromeを使ったAndroid WebViewページのデバッグ

Chrome

この記事は最終更新日から1年以上が経過しています。

ChromeのDeveloper Toolsを使用して、AndroidアプリのWebViewをデバッグできることを意外と知られていないようなので、実際にサンプルアプリを利用して説明します。

環境

  • PC
    • Windows10
    • Chrome(バージョン 57.0.2987.133)
  • Android
    • Galaxy S6 edge(404SC)
    • Android(OS 6.0.1)
  • IDE
    • Android Studio 2.3

前提条件

  • PCに Chrome 32 以降がインストールされていること
  • PC(Windowsの場合)に USB ドライバがインストールされていること
  • Android 4.0 以降であること
  • Android 端末が USBデバッグが有効になってること

1) WebViewのサンプルアプリを準備します。

AndroidManifest.xml

AndroidManifest.xmlへWeb接続を許可する設定を追加します。

が該当の部分です。

activity_main.xml

WebView部分の記述を activity_main.xmlへ追加した例です。
今回はサンプルなので以下簡単な追加

activity_main.java

WebViewをインポートするために、以下の2行を記述します。

デバッグのための WebView の設定
この設定を有効にしないとChromeでデバッグできません。

表示対象URLを「loadUrl」の部分に記述
(サンプルはレコチョク サイト)

まとめると以下の通り

2) Android 端末を使用してUSBデバッグを行う

サンプルアプリをビルド実行すると、アプリのWebViewへ「レコチョク サイト」が表示されました。

App.JPG


PCのChromeを起動して「chrome://inspect」へアクセスするとデバッグが有効なデバイスと WebView のリストが表示されます。
Windowsの場合、「F12キー」や「Ctrl+Shift+i」または 右クリックの「検証 > remote devices」 からDeveloper Toolsを起動しても良いです。
デバッグするには端末のモデル名に一致する箇所の「inspect」をクリックしてDeveloper Toolsを別ウインドウ表示します。

ChromeDevice.JPG


Android 端末から開発マシンにスクリーンキャストされます。
特にエラーなどなく表示されていました。(よかった、よかった)
Androidで表示されているWebViewをPCでデバッグすることが可能になります。

ChromeInspect.JPG

エラーがあるとこのように警告が表示される。

err.png

Chrome Developer Tools の機能についてはこちら

さいごに

ChromeのDeveloper ToolsはPCサイトのデバッグやスマートフォンのエミュレータなどで広く使われていると思いますが、Android端末とPCを接続したデバッグ作業も意外と簡単に可能なので活用してみてはいかかでしょうか?

この記事を書いた人

清崎康史
清崎康史
レコチョクでサービス立ち上げから運用までさまざまな経験を経て、最近ではプロダクト品質と向き合い、日々奮闘中です。

Chrome