设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 重新 试卷 文件
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

2019了,你还不会移动端真机调试?(2)

发布时间:2019-03-25 00:26 所属栏目:21 来源:佚名
导读:Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面

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代理

代理的地址为 PC的IP地址 ,代理的端口为spy-debugger的启动端口(默认端口为:9888)默认端口是 9888。

如果要指定端口: spy-debugger –p 8888

Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动

    4.手机安装证书(node-mitmproxy CA根证书)

第一步:生成证书:

生成CA根证书,根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。

  1. spy-debugger initCA 

第二步:安装证书:

把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上,点击安装即可。

Spy-debugger启动界面,同样,在手机端刷新页面之后,targets中会有记录

以我曾经做的京豆游戏的页面展示一下效果,当我们在手机上选中一个元素时,可以在电脑上看到相应的信息,这样我们就可以看出有可能是什么样式不兼容导致了UI的异常了,同样,还可以在控制台中看到JS的log信息,对于移动端调试来说非常有帮助。

总结:

  1. chrome inspect应用场景有限
  2. weinre安装简单,使用过程中需要增加和删除script,如果调试页面很多的情况下,不适用。
  3. spy-debugger安装略复杂,但是使用过程非常愉快。 
【责任编辑:庞桂玉 TEL:(010)68476606】
点赞 0

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读