移动端调试方案

页面容器

移动设备上的各种浏览器

chrome、safari、firefox、samsung browser

各类app内的webview

不同平台实现不一样

  1. iOS平台
    iOS 8.0以前的UIWebView，现在（2019年）基本被淘汰，不用管。
    iOS 8.0及以后的WKWebView，主流应用内均使用它作为容器展示html
  2. Android平台
    WebView实现一般为Android WebView，部分手机厂商会默认设置成chrome实现，差别不是很大。
  3. 微信平台

微信iOS端是采用wkwebkit进行渲染的，Android平台采用的是x5内核

debug方案

Android端

由于移动端网页开发不能直接打开developer tools，导致我们调试起来稍微麻烦。好在我们有解决方案：
Remote Devices
谷歌为我们提供的开发利器，让我们可以在电脑端使用developer tools进行elements检查和network监测，非常方便快捷。
使用方式：

  1. app容器需要进行如下设置，chrome、samsung浏览器不用，默认就能打开

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

  2. 手机打开usb调试

  3. 手机和电脑通过数据线连接，通过命令行执行，显示如图之后，表示成功连接

    adb devices

    执行结果

  4. 然后从chrome浏览器F12找到Remote devices

    RemoteDevices

  5. inspect你想要监听的页面，如下

    inspect

iOS端

使用Safari自带的开发者工具

  1. 首先是iOS设备点击设置->Safari->高级设置->打开web检查器

  2. 如果是app容器，使用webview加载页面，那么app容器需要是开发包，apple store上的正式包是不行的。

    这是safari里的web检查器

跨平台

抓包工具Charles

通过网络代理进行设备网络请求的监听，注意https需要设置证书，并且就算设置了证书，tls1.2以上的post请求也无法监听，只能监听tls1.2以下的，还有就是现在很多app基于https的，当它判断你的证书自定义的时候，会抛出异常无法进行api请求，请自行判断。

  1. 设备和电脑连到同一局域网，在Android设备中点击wifi详情，进入高级设置里设置网络代理，iOS设备点击wifi详情，点击配置代理选择手动。

  2. 代理主机名为你的笔记本在局域网下的ip地址，端口号在charles软件中proxy->proxy settings中设置

    代理设置成功

  3. 代理设置好后Android设备可能需要关闭wifi再重新打开wifi代理才能生效，并且第一次代理charles软件需要点击allow。

    charles

  4. https证书安装：Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice，它会指导你用手机下载一个charles自定义的https证书然后安装。

调试工具weinre

由于某些app并没有打开remote debug，而我们又要内嵌自己的页面进行调试，抓包只能检测网络请求。所以这个工具就有了使用场景。它能够检测elements并查看js输出信息。
使用方法：

  1. 通过npm安装weinre
    pw1 npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090
  2. 在你要调试的页面中插入js脚本,anonymous是appid，你可以自定义