移动端真机测试

niceforbear 发布于2019-08-23 16:32 / 2526人阅读

摘要：移动端真机调试方法真机调试调试调试真机调试缺点必须手机和都安装浏览器，其他浏览器无效。优点简单快捷方法手机端下载好浏览器，使用连接到，打开手机的调试模式。这时候，在调试的时候，移动端的页面也同步更新。

移动端真机调试方法

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中内容为空。

现在，我们需要做另外一点操作，在我们要调试的页面中，增加一个脚本。

其中需要把localhost改成自己本机的IP地址

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

这时，我们就可以点击Elements进行调试。

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

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

spy-debugger真机调试

优点：

方便，功能齐全

缺点：

安装稍微复杂一点

特点：

页面调试＋抓包

操作简单

支持HTTPS。

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

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

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

方法：
TODO。。。

服务器托管 idc机房托管 ios开发真机测试移动测试优惠移动应用测试移动app测试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103137.html

9102了，你还不会移动端真机调试？

摘要：移动端调试困难很多时候，我们在进行移动端开发时，都是先在端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。移动端调试困难很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化...

lushan 2019-08-23 16:16 评论0 收藏0
移动端真机调试实战经验

摘要：我个人比较推荐的方法是或者安卓手机的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。本文首次发表于本人的个人博客：http://cherryblog.site/ ，欢迎大家到我的博客查看更多文章~ 前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差...

rainyang 2019-08-20 16:21 评论0 收藏0
从零开始：微信小程序新手入门宝典《一》

摘要：为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序，推荐通读此文小程序是一种不需要下载安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习；一：微信小程序的特点张小龙：张小龙全面阐述小程...

whataa 2019-07-25 11:18 评论0 收藏0