初めまして、普段Androidアプリを開発している杉山です。 Androidアプリを開発するうえでWebViewのデバッグが必要になるときがあると思います。今回はPCのChromeからDeveloper Toolsを使用してデバッグする方法を紹介したいと思います。 本記事は以前レコチョクが紹介したChromeを使ったAndroid WebViewページのデバッグの内容を2024年の最新版にアップデートする形で書かせていただきます。 ※今回紹介する機能は、デバッグ向けの機能であるためリリースアプリは適応しないようにしてください。
環境
- PC
- MacOS Sonoma(14.5)
- Chrome(バージョン：129.0.6668.59)
- Androidデバイス
- Pixel 7a
- Android OS 14(APIレベル 34)
- 事前に開発者向けオプションを有効にし、USBデバッグを有効にしてください
- 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で「レコチョク」のコーポレートサイトが表示されました。
PCでChromeを起動して「chrome://inspect」へアクセスすると、デバッグが有効なデバイスとWebViewのリストが表示されます。 ※以前の記事紹介した「検証 > remote devices」からのアクセス方法は2019年に削除されてしまったようです。 リストが表示されたら、接続している端末の検証したいWebViewを探してください。 今回は下の画像にある赤線の部分が検証したいWebViewになります。 そして、赤枠で囲った「inspect」をクリックするとDeveloper Toolsを別ウィンドウで表示してくれます。 ※本記事ではPixel 7aで検証していますが、実際は各環境で接続している端末の検証したいWebViewの「inspect」をクリックしてください。
クリックすると、端末に表示されているWebViewの画面が、PCにスクリーンキャストされます。 これでAndroidデバイスで表示されているWebViewをPCからデバッグすることが可能になります。
エラーがあると以下のように警告が表示されます。
Chrome Developer Tools の機能についてはこちらを参考にしてください。
最後に
ChromeのDeveloper ToolsはPCサイトのデバッグによく利用されることが多いですが、Android端末とPCを接続することで、Android端末のWebViewのデバッグ作業も簡単に行えるようになります。 どちらもGoogleによって開発されているものなので、6年経った今でも変わらずデバッグが行えるようです。(導線が減ってしまったことは少し悲しいですが、、、) 是非活用してみてはいかがでしょうか？
杉山裕哉
