如何调试移动端页面

原创
2018/06/02 21:29
阅读数 2.2K

作者:汪娇娇

时间:2018年6月2日

之前一段时间过于忙碌,积压了很多博客,现在慢慢来还债啦~~

大家都知道,挂在PC端上的页面一旦出现问题,是比较容易进行调试的,只要下载对应的浏览器,打开控制台,打断点或直接看一下出问题的点,一般都能很快查出问题。但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。

一、Chrome DevTools

1、用数据线将电脑和手机连接起来;

2、打开手机的开发者模式 + USB 调试接口;

3、在浏览器上打开网址:chrome://inspect#devices

然后点开抓取到的网页就可以开始调试啦~~~

 

二、Mac Safari + iOS Safari

1、打开iphone手机的开发者模式,流程:【设置】->【Safari浏览器】->【高级】-> 开启【Web检查器】

2、打开Mac上Safari的开发者模式,流程:【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选

3、用数据线将iphone手机和mac连接起来,在电脑的safari中按照流程执行:【开发】->【手机名称】->【正在调试的网站】

比如我在iphone手机Safari上打开了百度的网址:

然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~

 

三、Charles

这个是抓包工具,可以抓取 request 和 response 数据。没办法像上面2种方法可以获取页面结构,主要用来获取数据、修改数据、模拟网络情况等(主要是测试用途)。

以Mac和iOS为例:

1、在电脑上下载 Charles:https://www.charlesproxy.com/download/

2、电脑和手机连接同一个无线网(这个很重要)。

3、在电脑端的 Charles 上按以下步骤找到代理服务器地址和端口号:

比如服务器地址是:192.168.1.105。

端口号是:8888。

4、在手机上配置代理:【设置】->【点击和电脑连接的同一个wifi最右边的蓝色i】->【配置代理】->【选择手动,配置服务器和端口】 

5、然后在手机浏览器输入以下网址安装证书:chls.pro/ssl

安装好之后还需要配置一下证书的信任:【设置】->【通用】->【关于本机】->【证书信任设置】->【将刚刚装上的证书打开信任】

然后打开手机上的任何页面就可以在Charles上抓包啦~~

如果有过滤网络请求的需要,可以做如下设置:

在 Charles 的菜单栏选择 【Proxy】–>【Recording Settings】,然后选择 include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址和端口号就可以啦。

其他功能可以参考这篇文章:charles使用教程

 

四、微信开发者工具

微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。

微信开发者工具下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具不仅支持url调试,也能对安卓手机进行远程调试,目前最新版还不支持iOS远程调试,打开设备监视面板:

打开后看到如下界面,可以看到有一台华为设备已经连接,远程调试要注意两点:

1、手机和电脑使用USB连接,手机要开启USB调试模式(不同手机不一样)。

2、手机上安装最新版谷歌浏览器并打开。

然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面:

五、Eruda

前几种方法其实都是在PC端对移动端远程调试,当你遇到PC端调试和手机上运行不一致的情况时(其实大部分都是这种情况,哈哈哈),就可以用 Eruda 调试,Eruda 可以让你直接在手机上看控制台,打log,也是很方便的嘞。

已经有人写了一篇很好的博客,大家直接去看就行:https://www.oschina.net/p/eruda

 

结束语

好啦,暂时就写这5种方法吧,其实还有其他方法,就等大家自己去探究吧,比如 xcode 等。

方法多种,可以独立用,也可以混着用,彰显你你功力的时候就到了😂。

这篇文章也是写了一个下午和一个晚上,没想到真的挺费劲,一边操作一边截图一边写,下一篇文章就等我先缓缓吧,哈哈哈哈

 

展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部