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文件大全

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

• 方案二: 下载离线开发者调试工具包（已支持56款手机，一劳永逸，永久使用！支持windows/mac/linux）
  本人是采用方案二,花10块钱,轻松解决问题,还提供相关答疑,服务挺到位,挺一下.
  Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）
  有需要的也可以评论区私我,但是毕竟是别人的作品,大家能买就不要私我

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

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

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

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

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