移动端远程调试汇总

原创 小枝节KKW 教程 移动调试 329阅读 2017-05-18 14:24:16 举报
1.Chrome自带的DevTools调试

DevTools既然是Chrome的功能,所以这种方法仅限于Chrome浏览器
方法如下:
(1) 手机上安装Chrome浏览器了,打开手机的USB调试功能(手机品牌不同,方法不同,可自行百度),然后USB连接电脑

移动端远程调试汇总
图1 手机开启USB调试
(2) 电脑打开Chrome浏览器,地址栏输入chrome://inspect,勾选发现设备,然后手机端访问网页,电脑上就会出现需要调试的页面,点击inspect进入调试

电脑发现设备
图2 电脑发现设备
(3) 接下来就会出现你想要的结果,调试手机就像调试PC的一样方便了,以下为手机端和PC端的对比,清晰明了~

PC浏览器端
图3 PC浏览器端

手机浏览器端
图4 手机浏览器端

2.微信web开发者工具

微信web开发者工具是微信推出的一款调试工具,主要用于微信开发调试的,但是浏览器也适用。
下载安装微信开发者工具,微信扫码登录,地址栏输入URL

移动端远程调试汇总
图5 微信web开发者工具界面
此工具中集成了两种移动调试的方法
<1> X5 Blink内核调试 (类似chrome的DevTools,仅限于微信里边访问的页面,不支持浏览器访问的)
<2> 普通调试(类似weinre调试),既支持微信访问,也支持浏览器访问
2种的具体使用方法上边都有详细的介绍,按照上面介绍的方法配置完成,手机端访问页面,PC上就会自动捕获到

移动端远程调试汇总
图6 微信web开发者工具移动调试

3.weinre远程调试

这3种方法各有利弊:
第一种仅限于chrome浏览器,其他的浏览器并不适用
第二种需要绑定微信公众号,申请开发权限
第三种是万能的,没有浏览器的限制,也没有权限的要求,缺点就是没有以上两种调试起来方便

以上就是我开发过程中用到的,欢迎指正和补充~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复