Android&Html5混合开发WebView调试必备神器DevTools

Android开发和Html5开发,对于其对应的专业程序开发人员来说都不是太难.但是对于两者结合的混合开发来说,很多人都望而却步.混合开发其本身并不难,真正让大家不安的是WebView加载H5的异常定位.调试困难症在我们团队出现过,我在面试的过程中也刻意去了解大家对Android中js调试的掌握程度,但现实是:大家都是浅尝辄止,使用最原生的js调用Android方法打印调试信息.这样的调试,效率之低下,问题定位之困难,可想而知.
然而,为了项目的需求,我们为了更好的保证效果和布局跨平台,Android&H5混合开发是我们不错的选择.那么解决Webview+H5的调试问题变得尤为重要,很庆幸google爸爸已经早有准备,今天就让我们一起去探索吧.

一、准备工作
PC端安装Google浏览器预览版下载
CSDN下载
原网址下载,打开网页较慢

注意:

  1. 手机端安装Google浏览器移动版 [手机端安装Google浏览器一定要比PC端安装的Google浏览器的版本低]
  2. 手机端和PC端的google浏览器都要打开

二、前提条件
Android版本应该在Android 4.4(KitKat)或更高版本上

使用Chrome开发人员工具调试原生Android应用中的WebView,Android版本应该在Android4.4(KitKat)或更高版本上
使用DevTools在原生Android应用中调试WebView内容。

三、使用步骤

1.在需要调试的应用中必须调用WebView类上的静态方法setWebContentsDebuggingEnabled 启用WebView调试。此设置适用于所有应用程序的WebView。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

提示: WebView调试不受应用程序 manifest 中debuggable标志的状态的影响。如果你想要仅在debuggable为true时启用WebView调试,在运行时测试这个标志。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

2 在 DevTools 中打开一个 WebView
在PC端Google预览器的网址栏输入chrome://inspect,可以显示设备上可调试的 WebView 列表
这里写图片描述
点击inspect可以进入调试视图
这里写图片描述

四、调试WebView白屏问题解决方案

1.点击inspect白屏的原因:

对于国内的程序猿来说,由于无法访问 https://chrome-devtools-frontend.appspot.com,只能出现空白页面:

2.解决的方案:

  • 方案一:翻墙
    首先翻墙也不一定可以解决问题,必须要ping通 chrometophone.appspot.com才可以.

    翻墙方案: 在C:\Windows\System32\drivers\etc\hosts文件中添加以下语句:

61.91.161.217    chrome-devtools-frontend.appspot.com
61.91.161.217    chrometophone.appspot.com

Host文件大全

但是很不幸,我都尝试过,但是失败了

3.chrome浏览器多开的方法
需求:
离线开发者调试工具包有一个通用包和一个专用包,用来处理不同的情况.这时候需要通过两个不同的浏览器打开,需要chrome浏览器多开.

Chrome浏览器在上网的过程中,会保存一些用户数据,如缓存、cookie、收藏的网页等信息。
这些信息的保存位置是可以设置的。方法也很简单:

桌面上复制一个Chrome的快捷方式,编辑属性,添加–user-data-dir参数即可
新建E:\chrome文件夹

--user-data-dir = E:\chrome

这里写图片描述

注意:
–user-data-dir之前需要有一个空格,否则路径找不到
多开之后,每个浏览chrome离线包应该存放的路径就会不同了
注意有些设备/平板无法显示页面视图,但是不影响调试,原因不明,有知道的可以在评论回复,如下图
这里写图片描述

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 33
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值