使用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()
            }
        }
    }