如何调试移动端页面

作者:汪娇娇

时间: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 条评论
登录 后参与评论

相关文章

来自专栏WeTest质量开放平台团队的专栏

面向Unity程序员的Android快速上手教程

随着Unity、cocos2dx等优秀跨平台游戏引擎的出现,开发者可以把自己从繁重的Android、iOS原生台开发中解放出来,把精力放在游戏的创作。原来做一款...

16730
来自专栏Laoqi's Linux运维专列

“考虑不全面”导致的大问题!!!

今天做了个小实验,由于自己的考虑不全面,导致了大问题的产生! 因为此问题我在全网几乎都未找到满意的答案,所以现在打算分享出来! 问题原因: 1 2 ...

42680
来自专栏Python中文社区

Python开发微信公众号后台(系列一)

專 欄 ❈ 段晓晨,写过一点爬虫,写过几篇文章。能力虽有限,会尽量把想说的东西讲清楚。 知乎ID:段小草 知乎专栏:小段同学的杂记, https://zhua...

3K100
来自专栏jojo的技术小屋

原 如何调试移动端页面

34960
来自专栏BeJavaGod

通过ngrok实现内网穿透,调试微信小程序

话说以前在做微信支付,支付宝支付的时候都是使用的花生壳,那个时候是免费的,多购买一个二级还不知道是三级域名多花了25块钱。 最近我们在搞小程序开发,没想到真的是...

81050
来自专栏JackieZheng

让我头疼一下午的Excel合并单元格

在网上copy下模板代码,填充自己的业务数据,提供一个http接口基本就可以得到你要导出的数据了。

16730
来自专栏一“技”之长

Xcode创建可复用的代码块 原

        在各种程序开发中,编写代码的效率是非常重要的一个问题,各种优秀的编译器也都有相应的插件用于提高程序员的编码速度。在xcode中,可以通过定义代码...

16020
来自专栏腾讯NEXT学位

新人如何搭建(copy)一个属于自己的博客

46040
来自专栏魏艾斯博客www.vpsss.net

宝塔面板网站备份迁移到新服务器的过程

最近群里有朋友问到宝塔面板的网站如何备份和搬家到新服务器,对于老手来说很简单了,但是对新手来说还需要有一步步学习的过程。为了方便众多新手学习、操作,魏艾斯博客总...

3.8K20
来自专栏林德熙的博客

win10 uwp 如何开始写 uwp 程序 安装 VisualStudio创建应用启动流程显示 hellow

本文告诉大家如何创建一个 UWP 程序。 这是一系列的 uwp 入门博客,所以写的很简单

11210

扫码关注云+社区

领取腾讯云代金券