失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 移动端真机调试 手机端调试 移动端调试

移动端真机调试 手机端调试 移动端调试

时间:2020-08-09 03:41:26

相关推荐

移动端真机调试 手机端调试 移动端调试

移动端真机调试方法

一、chrome真机调试:局限性:只能调试手机端的chrome浏览器,其他浏览器均不适用;优点是: 简单快捷;

二、spy-debugger调试:spy-debugger,安装稍微复杂一点,spy-debugger集成了weinre,不过还增加了抓包工具,使用最为方便;

一、chrome真机调试

1、手机端下载好chrome浏览器;

2、使用USB连接到PC,打开手机的USB调试模式;(也可以再谷歌拓展程序里面下载,inspectdevice

3、然后在PC端打开chrome浏览器,在地址栏输入:chrome://inspect勾选"discovery usb device";

4、打开应用程序,然后在手机端浏览网页,就可以看到如下的页面,点击inspect,进行调试;

注意:如果遇到无法调试的情况,可以重新打开手机的USB调试选项;

注意:如果网络加了域的,因为并不能使用这个方式,可以考虑使用另外两种调试方式;

二、spy-debugger真机调试

Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便;

特性:

页面调试+抓包

操作简单

支持HTTPS。

spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。

自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。

可以配合其它代理工具一起使用(默认使用AnyProxy)

Spydebugger安装与使用

全局安装:

npm install –g spy-debugger

启动:

spy-debugger

重要:设置手机的HTTP代理,同一个局域网,以及代理设置;

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

如果要指定端口:spy-debugger-p1002

Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动 -设置ip和端口号(对应自己启动的,参考下图)。

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

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

第一步:生成证书

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

spy-debugger initCA

第二步:安装证书

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

第三步:查看

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

三、移动端调试

可以看到你打印的内容及其他的信息,比如cookie、LocalStorage,Network、Element等;

微信打开这个网址/

扫二维码也可以

进去后,选择中间“信息”,然后一直往下翻,把vConsole打开,把下面两个Content Cache关掉;

然后打开你要调试的页面,你就你能看到右下角有个绿色按钮vConsole;点击就能查看你代码中console的内容了;

四、vConsole的使用

/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

如果觉得《移动端真机调试 手机端调试 移动端调试》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。