使用Chrome DevTools调试WebView
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools
·
前言
日常开发中,经常会使用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()
}
}
}
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:2 个月前 )
79116147 - 1 年前
f0359002 - 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)