2021-03-25

# 一种快速排查WebView问题的方法
## 案例背景
> 在最近项目B2冒烟测试中，地图功能诡异般的一直加载不出来了，由于不是自己写的代码，业务不熟悉加上网络请求是底层C++实现的，调试起来比较低效，排查问题比较慢。后面发现可以用Chrome浏览器来调试WebView感觉比较新颖，对于排查WebView问题比较便捷高效，所以写篇文章案例给大家分享一下。

## 案例分析和解决过程
### 案例分析
>在我们应用中地图功能是通过WebView加载JS来实现的，而JS文件不是在本地而是需要向平台请求的，那么问题首先定位在JS有没有请求成功。

### 解决过程
当然排查一个网络请求有很多中方法，比如我们常见的看日志打印、代码断点调试、抓包等，前面讲到这些方法在我们应用中对于WebView问题排查起来不方便低效，具体原因不多讲，接下来就结合我们项目给大家介绍一下怎么用Chrome浏览器远程调试WebView定位问题吧。
#### 环境准备
网上搜一下其实已经有很多类似的文章了，这里我还是简单的也介绍一下整个工具的使用过程。
- PC端安装Chrome32或更高版本浏览器
- PC端翻墙工具，因为打开远程调试界面需要翻墙
- Android4.0或更高版本手机
- Android手机开启调试模式，连接上电脑，就跟Android Studio开发调试一样就可以了

#### 远程设备界面
首先先打开远程设备界面，这里有两种方式打开：

    第一种：按F12/Ctrl+Shift+I或者在“菜单->更多工具->开发者工具"选择More tools->Remote devices，如下图：

    第二种：在Chrome浏览器中直接输入 chrome://inspect，如下图：

这种方式打开的界面跟上面的不太一样，但是大致结构差不多，从图中可以看到连接到电脑的设备名称，那么怎么调试远程设备页面呢，是不是要去设置一些复杂的参数呢？完全不需要！你只要在手机端打开Chrome浏览器或者WebView界面就能看到对应的界面信息，如下图：
上图红色区域就是Chrome页面和WebView页面，在Chrome旁边还有一个open tab with url的输入框我们在这里输入一个网址在手机浏览器上面就会打开对应的界面，这个是闲话那么接下来就是重点了。
#### 远程设备调试界面
在远程设备界面找到对应的Chrome/WebView页面，点击inspect连接就可以跳转到远程设备调试界面，当然别忘了开启翻墙，如下图：
从图中可以看到WebView界面信息，跟Web开发调试一样一样的，有兴趣的可以调试源码看看，不过我们的目的是调试网络请求，那么怎么看网络请求信息呢？
进入界面默认显示的就是网络请求状态列表，那么为什么没有看到请求状态呢，不用急F5刷新一下就看到了，如下图：
不需要太专业的Web端调试技能，从图中我们能很明显的看到很多请求返回状态是404资源找不到,仔细一看果然都是JS资源的请求失败了，这下问题找到了我们只要检查一下请求地址是否正确就行了，看下图所示：
最后给平台开发人员一看是请求路径拼接不对导致的，问题终于找到了，是不是很高效，关于WebView类似的问题都可以这样排查。
最后有同事会说根本用不了，在设备界面WebView页面一直不显示出来，更别说进入调试界面了……
最后忘记补充最重要的一点了:），需要在APP中启用WebView调试，Chrome才能进行远程调试（别忘记翻墙）：
```java
if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT)
{
    WebView.setWebContentsDebuggingEnabled(true);
}
```

#### 扩展
看到这里有同事会说Release包怎么调试，请自行百度一下``强制开启WebView Debug模式``，本篇案例不做介绍。

## 总结
本篇文章介绍了通过Chrome远程调试快速排查移动端WebView问题的案例，对于遇到此类问题的同事可以有效的提升问题的排查效率，起到一定的借鉴作用。

参考资料:
- 参考资料 *[More](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)*