[Android]WebViewで開いているページをデバッグする

手順

①Android側に１行を追加する

②Chromeでurlを入力する所へchrome://inspect/#devicesを入力する

③inspect押下

以上です。

①Android、以下の１行を追加する

WebView.setWebContentsDebuggingEnabled(true)

記事の下部に記載例を掲載しています。

②Chromeでurlを入力する所へ以下を入力する

chrome://inspect/#devices

を入力。

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

③inspect押下

これでデバッグすることができます。

ソースもこの画面で触れます。

WebViewFragment.kt

package com.example.skillschallenge

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient

const val NETWORK_ADDRESS ="https://tanukigolf.com/"

class WebViewFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // WebViewのデバッグを有効にする
        WebView.setWebContentsDebuggingEnabled(true)
        val v: View = inflater.inflate(R.layout.fragment_web_view, container, false)
        val mWebView = v.findViewById<View>(R.id.web_view) as WebView
        //webview内のJavaScriptを有効にする
        mWebView.settings.javaScriptEnabled = true
        mWebView.webViewClient = WebViewClient()
        mWebView.loadUrl(NETWORK_ADDRESS)
        return v
    }

    companion object {
        @JvmStatic
        fun newInstance(param1: String, param2: String) =
            WebViewFragment().apply {
                arguments = Bundle().apply {
                }
            }
    }
}