移动端H5页面调试

Debug, H5, 移动端

前言

移动端H5页面不同于传统PC页面，无法在移动设备上打开浏览器的dev工具进行调试，需要通过一些工具和设置，才能进行调试。下面，是笔者常用的一些移动端调试方法和工具。

Safari调试IOS页面

步骤

  1. 如果使用真机，由于iOS有签名校验机制，所以安装在真机上的包必须是测试包；如果是IOS模拟器，则忽略这一步
  2. 打开IPhone -> 设置 -> Safari -> 高级 -> Web检查器
  3. 通过USB线连接Mac
  4. 在Mac上打开Safari -> 偏好设置 -> 在菜单栏中显示“开发菜单”
  5. 开发 -> [你的IPhone] -> [你要调试的页面]

Chrome调试Android页面

步骤

  1. 如果是WebView,则需要允许WebView Debug；如果是Android Chrome则忽略这一步

    1
    2
    // APP代码中增加
    WebView.setWebContentsDebuggingEnabled(true);

  2. 开启Android设备的USB调试模式

  3. 通过USB线连接Mac
  4. 在Mac上打开Chrome -> chrome://inspect/#devices -> [你要调试的页面]

spy-debugger调试Android和IOS页面

步骤

  1. 安装spy-debugger

    1
    npm install -g spy-debugger

  2. 手机和Mac处于同一个局域网

  3. 终端输入spy-debugger
  4. 手机设置HTTP代理，[Mac IP地址]:9888

  5. 手机安装https证书,来调试https站点

    1
    注：手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx安装证书

  6. 打开你要调试的页面

具体使用详见: GitHub

mobile-debug调试Android和IOS页面

步骤

  1. 安装mobile-debug: 官网
  2. 打开调试界面
  3. 接入新设备
  4. 按照提示进行，完成http代理设置，并安装https证书来调试https站点
  5. 点击调试注入规则管理 -> 添加调试注入规则

具体使用详见: 官网

扩展

spy-debugger是如何实现调试的

spy-debugger和mobile-debug可以调试任何APP，不需要在APP源码中做任何处理。那它们是如何做到的呢，mobile-debug因为是闭源的，我们无法知道。但spy-debugger是开源的，我们可以看到其源码。
通过文档和其源码可知，spy-debugger是对weinre, anyProxy以及node-mitmproxy的封装。其工作流程大致如下：

  1. 启动weinre server以及weinre client
  2. 启动一个mitmproxy server，当连接了这个proxy的手机请求H5页面的时候，就会向H5页面注入weinre的target.js脚本，而target.js则会去hook相应的console方法, 实现RPC调用,将日志显示在控制台中
  3. 启动一个anyProxy server，抓取H5页面的所以HTTP(S)请求，弥补weinre network面板显示的内容不够详细，同时可以用charles等抓包工具替代anyProxy,满足更多数据分析的需求

结语

以上就是笔者常用的移动端H5页面调试工具和方法，由于上述方法和工具已经能很好的满足日常H5页面的调试，所以没有再尝试其它调试工具，如果你有时间有兴趣，可以多尝试下其它工具和方法。