使用Chrome DevTools调试WebView

前言

日常开发中，经常会使用WebView去加载一些HTML页面，如在app中登录后在打开的HTML中也需要登录，一般情况下会将登录后的Token存储在中Cookie, 方便HTML在Session中校验。在Android手机中查看WebView是否携带Cookie不是特别方便，下面介绍一款调试比较方便的工具，Chrome中的DevTools工具。

---

使用

WebView的Setting设置这里不在详细介绍，各自按照需求设置即可，使用DevTools工具，只需要保证WebView设置以下两个方法：

• setJavaScriptEnabled(boolean flag) // 支持js
• WebView.setWebContentsDebuggingEnabled(true) // 设置debug调试

在Chrome中输入 chrome://inspect/#devices 打开一下界面

BLA-AL00是我的使用的测试机型号，如果显示不出来请检查USB是否连接。WebView加载成功后会看到如下界面

页面加载完成后，点击 inspect 弹出如下窗口，此时我们可在工具栏中找到Application项，在Cookie中查看设置的Cookie属性，local是调试时设置的cookie值。

另外一种方式就是使用命令，查看当前HTML页面中的属性，在Console中输入 document.cookie 查看设置的cookie属性

WebView设置Cookie

    private fun syncCookie(uri: String) {
        val mCookies = CookieDatabase.getDefault().getCookieByName("token") // 保存在本地数据库中的cookie, 这个根据自己需求保存
        CookieManager.getInstance().apply {
            setAcceptCookie(true)
            removeSessionCookies { logE("remove session cookie status : $it") } // 移除旧的[可以省略]
            removeAllCookies { logE("remove all cookie status : $it") }
            mCookies.forEach { cookie-> setCookie(uri, "${cookie.name}=${cookie.value}") }
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                flush()
            } else {
                CookieSyncManager.getInstance().sync()
            }
        }
    }