移动端真机测试

移动端真机调试方法chrome真机调试weinre调试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真机调试优点：方便，功能齐全缺点：安装稍微复杂一点特点：页面调试＋抓包操作简单支持HTTPS。spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。可以配合其它代理工具一起使用(默认使用AnyProxy)方法：TODO。。。