移动端调试方法汇总

背景：随着移动端的不断推进，移动端的调试也成为前端开发者不得不面临的问题，在PC端的时代，我们直接打开
chrome的检查元素面板，就可以解决大部分的问题了。但是到了移动端，明明在电脑上模拟好的元素，在手机上就会
乱掉。下面我们就来一起聊一聊移动端调试的那些问题，让真机调试不在那么困难。

1、浏览器模拟手机调试

1.1 如何使用？

chrome作为一款浏览器，给开发者带来的便捷也是为人所称道的。在PC端，只需要F12，打开开发者工具，就可以开始调试了，这点就不用我多说了。而其开发者工具中加入的模拟手机调试选项更是强大。只需要点击“切换设备”工具，如图1.1.1所示。

1.2 何时使用？

建议在日常的开发过程中，尽量使用chrome模拟进行开发，因为其容易使用与速度快（电脑的性能与网速还是比手机强不少的）。使用模拟功能，我们能快速先把功能与布局调试出来。据笔者经验，使用chrome模拟开发出来的网页，一般在真机上都没什么问题。

1.3 注意事项

使用chrome模拟调试的同学可能有时候会碰到touchstart，touchend等事件无法触发的情况。先不要着急担心是自己代码的问题，因为chrome模拟调试。目前还有一点问题，我们在进行过一些操作后，模拟状态会丢失。chrome虽然窗口大小还在模拟移动端，鼠标事件已经变成PC端的模拟了。所以需要再触发两次模拟，就会恢复模拟移动端。如图1.1.2所示

2、Android手机 + chrome（真机调试）

2.1 有什么用？

虽然使用PC端浏览器模拟开发很强大，但是我们在chrome上模拟的移动端网页，在真机运行的时候，总会遇到一些样式错乱的问题，这时，我们就需要使用真机来进行调试；
建议：使用模拟开发完后，如果在真机上测试遇到了问题（无论什么浏览器），首先应该用chrome来检查一下，如果在手机chrome上也遇到了同样的问题，那么使用chrome的调试是非常方便的，应该首选其调试。

2.2 如何使用？

你需要有：一台Android手机，一台电脑，一根Android数据线

操作步骤：
1、首先需要在Android手机上安装chrome浏览器；
2、然后打开手机的开发者模式，一般Android手机都是通过以下路径打开开发者模式，设置->关于手机->版本号连按5次，之后设置菜单里会多出一个开发人员选项，进入将其中的“USB调试”打开即可，如图2.2.1

3、将手机与电脑通过USB线连接，弹出对话框“是否允许USB调试”，选择确定，如图2.2.2

4、打开手机上的chrome，并进入需要调试的页面，如图2.2.3

5、打开PC端chrome，在地址栏中输入chrome://inspect/，进入调试页面，此时，我们发现，chrome检测到了我们的手机，如图2.2.4

6、点击inspect弹出chrome调试工具，然后就可以在电脑上调试真机了，如图2.2.5

2.3 注意事项

在上面第6步的时候，点击inspect后，弹出的面板可能是一片空白，这是因为，首次使用该功能时，需要连接外网（翻墙），初始化后，成功显示了调试工具的面板后，以后就不需要翻墙了。

3、iPhone手机 + Safari浏览器

3.1 有什么用？

如果模拟器没有问题，iPhone手机上运行时出现了问题，首先使用iPhone自带的Safari浏览器查看一下网页，如果浏览器中出现了同样的问题，则建议配合Mac上的Safari进行调试，找出问题所在。

3.2 如何使用

你需要有：一部iPhone，一台Mac，一根iPhone数据线

操作步骤：

1、打开手机上的Safari调试，具体步骤为，设置->Safari->高级->web检查器（打开），如图3.2.1

2、打开Safari，并打开需要调试的网页，如图3.2.2

3、打开Mac上的Safari，选择开发->账户名-右侧需要测试的网页URl，如图3.2.3

4、利用检查器进行调试，如图3.2.4

4、微信内置浏览器调试

4.1 有什么用

使用微信团队提供的微信调试工具，可以调试在微信中访问的页面。

4.2 如何使用

操作步骤：
1、首先，下载微信调试工具，并安装。微信调试工具下载
2、使用USB线，将手机与电脑连接，扫描二维码，勾选 信息->TBS setting->是否打开TBS内核inspector调试功能。点击“提交” 如图4.2.1、4.2.2

3、使用微信，打开网页，之后点击“开始调试”（如图4.2.3），弹出如图4.2.4的调试列表。点击需要调试的页面下方的inspect进行调试，弹出调试工具，如图4.2.5

图4.2.3

图4.2.4

图4.2.5

5、使用weinre调试

5.1 有什么用

如果上述所说的所有浏览器均没有出问题，但是偏偏有些浏览器下，自己的网页发生了问题，可是这个浏览器又没有解决方案的话。我们的秘密武器weinre就要登场了。它可以调试所有浏览器。其原理是在要调试的页面上加上一段js，再由这段js，支持电脑与手机的调试与调用。由于weinre的原理是注入js，微信等内置浏览器也可以使用weinre进行调试。

5.2 如何使用

如果是一个人调试的话，可以在自己的机器上使用个人的解决方案。

操作步骤

1、在自己的电脑上使用npm（或cnpm）安装weinre，安装命令及结果如图5.2.1所示

2、启动weinre服务，绑定到localhost，端口可以自己选一个，不要与其他服务端口重启就行，如图5.2.2所示，开启8081端口

3、按照提示打开 http://localhost:8081 ，发现服务已经启动了，如图5.2.3所示

4、将生成的js，引入自己将要调试的页面中去，如图5.2.4所示，生成的js在图5.2.3中箭头标识

5、然后使用任意手机端浏览器打开这个页面，进行调试，如图5.2.5所示

6、在http://localhost:8081上，点击第一个连接，进入调试页面，如图5.2.6所示

7、在调试页面中，发现有一个客户端连接了本weinre服务，如图5.2.7，点击上方最新连接的客户端，然后点击element进行调试，如图5.2.8所示

图5.2.7

图5.2.8

8、团队调试

如果希望搭建一个服务，团队公用的话，也是可以的，只需要找一台服务器，在其上运行weinre，并让所有团队成员，调试时，均引用这台服务器上生成的js，调试页面是可以选择调试哪个接入的手机的，如图5.2.9，只要团队成员，调试的时候，自己选择自己的访问就可以了。

6、使用spy-debugger方法调试（github介绍）

6.1 介绍及特性

1、介绍

（1）站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybirdApp等）。支持HTTP/HTTPS，无需USB连接设备。
（2）spy-debugger原理是集成了weinre，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。

2、特性

（1）页面调试＋抓包
（2）操作简单，无需USB连接设备
（3）支持HTTPS。
（4）spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
（5）自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
（6）可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

6.2 使用步骤

1、安装插件
window下：

npm install spy-debugger -g

Mac下：

sudo npm install spy-debugger -g

2、使手机和PC保持在同一网络下（比如同时连在一个WiFi下）；
3、打开cmd，输入spy-debugger，按命令行提示用浏览器打开相应地址；
4、设置手机的HTTP代理，代理IP地址设置为PC端的IP地址，端口为spy-debugger的启动端口（默认端口：9888），如下图所示；

（1）Android设置代理步骤：

设置 -> WLAN -> 长按选中网络 -> 修改网络 -> 高级 -> 代理设置 - 手动

（2）IOS设置代理步骤：

设置 -> 无线局域网 -> 选中网络 -> HTTP代理 -> 手动

5、手机安装证书。注：手机必须先设置完代理后再通过（非微信）手机浏览器访问 http://s.xxx（可直接扫码访问，如图6.2.2）安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装）。问题：IOS10.3.1以上版本证书安装问题；

6、用手机浏览器访问你要调试的页面即可

6.3 自定义选项
（1）端口设置（默认端口为9888）：

spy-debugger -p 8888

（2）设置外部代理（默认使用AnyProxy）：

spy-debugger -e http://127.0.0.1:8888

spy-debugger内置AnyProxy提供抓包功能，但是也可通过设置外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

（3）设置内容页面为可编辑模式（默认false）

spy-debugger -w true

内部使用原理：在需要调试的页面内注入代码：document.body.contentEditable = true；暂不支持使用了iscroll框架的页面。

（4）是否允许weinre监控iframe加载的页面（默认false）

spy-debugger -i true

（5）是否只拦截浏览器发起的https请求（默认true）

spy-debugger -b false

有些浏览器发出的connect请求没有正确的携带userAgent，这个判断有时候会出错，如UC浏览器。这个时候需要设置为false。大多数情况建议启用默认配置：true，由于目前大量App应用自身（非WebView）发出的请求会使用到SSL pinning技术，自定义的证书将不能通过app的证书校验。

（6）是否允许HTTP缓存（默认false）

spy-debugger -c true