移动端真机测试

移动端真机调试方法

1. chrome真机调试
2. weinre调试
3. spy-debugger调试

chrome真机调试

缺点：
必须手机和pc都安装chrome浏览器，其余浏览器无效。

优势：
简单快捷

方法：

手机端下载好chrome浏览器，使用USB链接到PC，打开手机的USB调试模式。

而后在PC端打开chrome浏览器，在地址栏输入：chrome://inspect. 勾选"discovery usb device"。

而后在手机端浏览网页，就能够看到以下的页面，

点击inspect，进行调试。

ps：若是手机端是IOS则须要在MAC下操做才能够。Windows只能抓到安卓手机

wenire真机调试

缺点：
没法打断点
优势：

• weinre调试方式，安装和适用不复杂，适用于全平台的调试，即任何手机的任何浏览器皆能够调试，不过须要手机和电脑在同一个网段下。*

方法：
全局安装：

npm install  – g weinre

局部安装：

npm install weinre

启动：

weinre  --httpPort 8090 --boundHost  -all-

weinew启动参数说明

• httpPort：设置Wninre使用的端口号，默认是8080。
• boundHost：[hostname | Ip | -all-]: 默认是 ‘localhost’。
• debug [true | false]：这个选项与–verbose相似， 会输出更多的信息。默认为false。
• readTimeout [seconds]：Server发送信息到Target/Client的超时时间， 默认为5s。
• deathTimeout [seconds]：默认为3倍的readTimeout， 若是页面超过这个时间都没有任何响应， 那么就会断开链接。

控制台启动截图：

启动了weinre以后，咱们在浏览器中输入localhost:8090.显示以下界面，表示已经启动成功。

点击"debug client user interface"，进入调试页面。

当前的targets中内容为空。

如今，咱们须要作另一点操做，在咱们要调试的页面中，增长一个脚本。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

其中须要把localhost改为本身本机的IP地址

targets已经不为none，已经能捕捉到嵌入脚本的页面。

这时，咱们就能够点击Elements进行调试。

这时候，在调试的时候，移动端的页面也同步更新。修改样式时，会在手机端即时生效，而且也能够查看控制台信息，惟一一点就是，不能进行断点调试。

最后，在调试结束以后，别忘记删除嵌入的script。

spy-debugger真机调试

优势：

方便，功能齐全

缺点：

安装稍微复杂一点

特色：

1. 页面调试＋抓包
2. 操做简单
3. 支持HTTPS。
4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5. 自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不形成任何影响。
6. 能够配合其它代理工具一块儿使用(默认使用AnyProxy)

方法：TODO。。。