如何调试移动端页面

作者：汪娇娇

时间：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 等。

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

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