【2024年最新版】Chromeを使ったAndroid WebView ページのデバッグ

Android, Google Chrome

初めまして、普段Androidアプリを開発している杉山です。
Androidアプリを開発するうえでWebViewのデバッグが必要になるときがあると思います。今回はPCのChromeからDeveloper Toolsを使用してデバッグする方法を紹介したいと思います。
本記事は以前レコチョクが紹介したChromeを使ったAndroid WebViewページのデバッグの内容を2024年の最新版にアップデートする形で書かせていただきます。
※今回紹介する機能は、デバッグ向けの機能であるためリリースアプリは適応しないようにしてください。

環境

  • PC
    • MacOS Sonoma(14.5)
    • Chrome(バージョン：129.0.6668.59)
  • Androidデバイス
  • IDE
    • Android Studio Koala | 2024.1.1 Patch 1

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

AndroidManifest.xml

AndroidManifest.xml にはインターネット接続の許可するパーミッション android.permission.INTERNET を追加しておきます。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
 
    // インターネット接続のパーミッション
    <uses-permission android:name="android.permission.INTERNET"/>
 
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.WebViewDebugSample"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.WebViewDebugSample">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

WebViewに関してはxmlを用いる方法とComposeを用いる方法の2パターンで紹介します。以降のデモはComposeの方のサンプルアプリで行います。

xmlの場合

activity_main.xml

今回はWebView表示のサンプルアプリであるため、簡単な追加にしています。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.webvewdebugsamplexml.MainActivity">
 
    <!-- WebView部分の記述 -->
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>

MainActivity.kt

WebViewを呼び出すには以下の2行をインポートします。
import android.webkit.WebView
import android.webkit.WebViewClient

またデバッグをするために、以下の設定を追加します。
この設定を有効にしないとChromeでデバッグをすることができません。(アプリの minSdkが19以上であれば条件文は必要ありません)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // APIレベル19（Android4.4）以上
    WebView.setWebContentsDebuggingEnabled(true)
}

表示対象URLを loadUrlに記述します。
サンプルは「レコチョク」のコーポレートサイトにしています。
myWebView.loadUrl("https://recochoku.jp/corporate/")

まとめると以下のようになります。
package com.example.webvewdebugsamplexml
 
import android.annotation.SuppressLint
import android.os.Build
import android.os.Bundle
import android.view.View
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // APIレベル19（Android4.4）以上
            WebView.setWebContentsDebuggingEnabled(true)
        }
 
        setContentView(R.layout.activity_main)
        val myWebView = (findViewById<View>(R.id.webView1) as WebView).apply {
            settings.javaScriptEnabled = true
        }
        // WebViewでリンクをクリックした際、標準ブラウザでなくWebView内で表示するようにする
        myWebView.webViewClient = WebViewClient()
 
        // アプリ起動時に読み込むURLの指定
        myWebView.loadUrl("https://recochoku.jp/corporate/")
 
    }
}

Composeの場合

MainActivity.kt

Composeの場合でもWebViewに必要なインポートは変わりません。
ただしWebViewを表示するために、以下のように AndroidViewを使う必要があります。
AndroidView(factory = { context ->
    WebView(context).apply {
        settings.javaScriptEnabled = true
        WebView.setWebContentsDebuggingEnabled(true) // xmlと同様にデバッグ用の設定を追加します
        webViewClient = WebViewClient()
        loadUrl("https://recochoku.jp/corporate/")
    }
}, modifier = modifier.fillMaxSize())

まとめると以下のようになります。
package com.example.webviewdebugsample
 
import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import com.example.webviewdebugsample.ui.theme.WebViewDebugSampleTheme
 
class MainActivity : ComponentActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebViewDebugSampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    WebScreen()
                }
            }
        }
    }
}
 
@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebScreen(modifier: Modifier = Modifier) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            settings.javaScriptEnabled = true
            WebView.setWebContentsDebuggingEnabled(true)
            webViewClient = WebViewClient()
            loadUrl("https://recochoku.jp/corporate/")
        }
    }, modifier = modifier.fillMaxSize())
}
 
@Preview(showBackground = true)
@Composable
fun WebScreenPreview() {
    WebViewDebugSampleTheme {
        WebScreen()
    }
}

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

検証する端末をPCに接続し、サンプルアプリをビルド実行すると、WebViewで「レコチョク」のコーポレートサイトが表示されました。

sampleApp

PCでChromeを起動して「chrome://inspect」へアクセスすると、デバッグが有効なデバイスとWebViewのリストが表示されます。
※以前の記事紹介した「検証 > remote devices」からのアクセス方法は2019年に削除されてしまったようです。
リストが表示されたら、接続している端末の検証したいWebViewを探してください。
今回は下の画像にある赤線の部分が検証したいWebViewになります。
そして、赤枠で囲った「inspect」をクリックするとDeveloper Toolsを別ウィンドウで表示してくれます。
※本記事ではPixel 7aで検証していますが、実際は各環境で接続している端末の検証したいWebViewの「inspect」をクリックしてください。

DevTools

クリックすると、端末に表示されているWebViewの画面が、PCにスクリーンキャストされます。
これでAndroidデバイスで表示されているWebViewをPCからデバッグすることが可能になります。

PixelWebView

エラーがあると以下のように警告が表示されます。

error

Chrome Developer Tools の機能についてはこちらを参考にしてください。

最後に

ChromeのDeveloper ToolsはPCサイトのデバッグによく利用されることが多いですが、Android端末とPCを接続することで、Android端末のWebViewのデバッグ作業も簡単に行えるようになります。
どちらもGoogleによって開発されているものなので、6年経った今でも変わらずデバッグが行えるようです。(導線が減ってしまったことは少し悲しいですが、、、)
是非活用してみてはいかがでしょうか？

Android, Google Chrome