webview 调试方案总结

[weekeight]

webview 调试方案总结

我们在做移动web开发时，总会遇到各种问题需要调试。如果仅是在浏览器里面的调试还相对容易一些，但是现在大部分的移动web页面都是内嵌在某个APP里面的，调试就比浏览器里面多了一些限制。下面我们来一起看看有哪些调试方式更加适合哪些场景，主要讲述如何做 webview 页面的调试，有些常见的点会简单带过，如有不清楚的地方可以自行谷歌。

初级方案

在开发 webview demo 页面阶段，最简单也是最常用的方式就是在 chrome 模拟器里面调试，本地用 Node 来开启本地服务器来模拟数据。

而当想利用 chrome 模拟器来调试线上的页面时，一般会遇到两个问题：1. 权限验证问题 2. 调用hybrid接口报错问题

第一个问题是由于一般 webview 页面在APP里面都会做权限验证（通过客户端 Post 来获取页面，服务器返回 cookie；或者直接是客户端在打开webview的时候在url后面加上token参数来让服务器做验证），想要在 chrome 模拟器里面调试则必须提供一个web 登录页面，如果权限认证失败则重定向到这个登录页面即可。

第二个问题是这个方案的死穴，只能说如果不需要调试 hybrid 接口的时候可以使用这个方案，否则则需要另取方案。

优点： 方便快捷，也是最常用的一种方式
缺点： 无法真机调试；遇到页面调用 hybrid 接口的就无法调试了

初级+方案

在实际开发当中，仅通过chrome的模拟器来调试是远远不够的。当需要真机调试的时候，可在测试环境下真机上的APP提供一个入口供我们填入网页地址则可以打开自定义的页面，从而进行真机调试。这种方式依赖客户端提供这个入口，需要和客户端开发同学协商。

这种方式配合上网络代理则可轻松应对本地开发调试及线上环境调试，网络代理可取Charles或者Fiddler。（如果不清楚具体如何设置使用就问谷歌吧）

优点： 真机调试，快速响应
缺点： 依赖客户端提供打开自定义webview的入口；无法使用类似chrome的“审查元素”功能做奇葩的样式调试；无法断点调试

中级方案

当我们即想在真机上调试，但是又想使用类似chrome浏览器的 Elements, Network 等功能时该怎么办呢？这时就是 weinre 登场的时候了。下面简单介绍下如何使用它来配合调试

1. 启动weinre server

weinre --httpPort 监听端口 --boundHost 局域网ip

1. 页面嵌入脚本

本地调试场景：

在 demo 页面嵌入这个脚本 <script src="http://局域网ip:监听端口/target/target-script-min.js#anonymous"></script>

线上调试场景：

使用 Charles 或 Fiddler 做为设备的网络代理，将需要调试的页面设置“断点”或者“映射”，并嵌入脚本 <script src="http://局域网ip:监听端口/target/target-script-min.js#anonymous"></script>

1. 调试

本地浏览器打开 http://局域网ip:监听端口/client/#anonymous 即可看到调试页面

优点： 真机调试；可以审查元素等
缺点： 无法断点调试；使用 weinre 调试有时候会卡顿

高级方案

这个方案需要客户端配合，但未尝不是一个能提高调试效率的好方法。不同的操作系统需要做的操作不大一样，如下所述：

IOS 系统

参考官方文档

1. 设置调试开关

   在PC端的safari浏览器中： 'safari'-'偏好设置'-'高级'-'在菜单栏显示“开发”菜单'

   在手机端的设置中： '设置'-'safari'-'高级'-勾上'Javascript'和'Web inspector'

2. 开启设备的调试权限

   让客户端开发童鞋帮你的设备装上开发授权证书(development provisioning profile)，安装好你要测试的APP

   在电脑上的终端输入下面的命令（实际测试中，发现不用输这命令也可以）

   // 将 com.bundle.identifier 替换为你测试的APP的bundle.identifier
   defaults write com.bundle.identifier WebKitDeveloperExtras -bool true
   

3. 用USB连接手机和电脑

   在APP里面打开webview后，在电脑打开 safari 浏览器，在菜单栏-"开发"-你的设备-会列出目前APP打开的webview，点击选择既可以打开调试。

4. 配合 Charles 来做文件映射实时调试页面

Android 系统

要求 Android4.4+ 及以上版本；chrome for pc 32版本及以上（最好下载chrome canary来调试使用）

1. 设置调试开关

   在手机端的设置中： 开发人员选项 - 勾上 USB调试

2. 开启设备的调试权限

   让客户端开发童鞋在APP测试环境下调用下面的方法则可开启调试权限了

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

3. 用USB连接手机和电脑

   在APP里面打开webview后，在电脑打开 Chrome 浏览器，地址栏中输入 chrome://inspect 则可看到设备打开的webview页面，点击选择开始调试

4. 配合 Charles 来做文件映射实时调试页面

5. 更多本地网络代理等设置请参考官方文档

优点： 真机调试；支持审查元素，网络请求，断点调试等
缺点： 需要客户端配合；稍微麻烦一点

终极方案

调试 IOS 设备时可通过 xcode 的模拟器来调试；

调试 Android 设备时可下载genymotion来安装手机模拟机来调试；

两者都配合上面的“高级方案”即可轻松完成webview调试