江苏龙网

  1. 主页 > 生活百科 > >

移动端真机调试方法( 二 )

移动端


3.spy-debugger真机调试最后，再介绍一下spy-debugger方法 。用这个方法，我们不再需要自己增加和删除脚本 。
Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码 。简化了weinre需要给每个调试的页面添加js代码 。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码 。让页面调试更加方便 。
特性:

  1. 页面调试＋抓包
  2. 操作简单
  3. 支持HTTPS 。
  4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy 。
  5. 自动忽略原生App发起的https请求，只拦截webview发起的https请求 。对使用了SSL pinning技术的原生App不造成任何影响 。
  6. 可以配合其它代理工具一起使用(默认使用AnyProxy)
Spydebugger安装与使用
  1. 安装: 全局安装 npm install –g spy-debugger
  2. 启动: spy-debugger
  3. 设置手机的HTTP代理
  4. 代理的地址为 PC的IP地址，代理的端口为spy-debugger的启动端口(默认端口为：9888)默认端口是 9888 。
  5. 如果要指定端口: spy-debugger –p 8888
  6. Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
  7. IOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动
  8. 手机安装证书(node-mitmproxy CA根证书)
  9. 第一步：生成证书：
  10. 生成CA根证书，根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(mac) 。
spy-debugger initCA
  1. 第二步：安装证书：
  2. 把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击安装即可 。
  3. Spy-debugger启动界面，同样，在手机端刷新页面之后，targets中会有记录
以我曾经做的京东游戏的页面展示一下效果，当我们在手机上选中一个元素时，可以在电脑上看到相应的信息，这样我们就可以看出有可能是什么样式不兼容导致了UI的异常了，同样，还可以在控制台中看到JS的log信息，对于移动端调试来说非常有帮助 。
总结:
  1. chrome inspect应用场景有限
  2. weinre安装简单，使用过程中需要增加和删除script，如果调试页面很多的情况下，不适用 。
  3. spy-debugger安装略复杂，但是使用过程非常愉快 。




推荐阅读


上一篇：如何区分新茶和混合茶

下一篇：福建颁布绿色发展优质茶推广措施