如何调试手机上的页面？

一. 如何调试手机上的页面

参考safari调试iPhone app web页面进行相关配置，就可以在mac上调试手机safari浏览器打开的页面。

如果想使用mac上的chrome调试手机页面，可以参考如何用 Chrome DevTools 调试 iOS Safari或通过chrome浏览器调试手机页面(IOS和Android)

二. 通过charles抓包

使用charles分为3步

1. 将Charles设置成系统代理

之前提到，Charles是通过将自己设置成代理服务器来完成封包截取的，所以使用Charles的第一步是将其设置成系统的代理服务器。

启动Charles后，第一次Charles会请求你给它设置系统代理的权限。你可以输入登录密码授予Charles该权限。你也可以忽略该请求，然后在需要将Charles设置成系统代理时，选择菜单中的 "Proxy" -> "Mac OS X Proxy"来将Charles设置成系统代理。

2. 截取iPhone上的网络封包

Charles通常用来截取本地上的网络封包，但是当我们需要时，我们也可以用来截取其它设备上的网络请求。下面我就以iPhone为例，讲解如何进行相应操作。

Charles上的设置
要截取iPhone上的网络请求，我们首先需要将Charles的代理功能打开。在Charles的菜单栏上选择Proxy->Proxy Settings，填入代理端口8888，并且勾上Enable transparent HTTP proxying就完成了在Charles上的设置。如下图所示:

3. 过滤网络请求

通常情况下，我们需要对网络请求进行过滤，只监控向指定目录服务器上发送的请求。对于这种需求，我们有2种办法。

1. 在主界面的中部的Filter栏中填入需要过滤出来的关键字。例如我们的服务器的地址是：http://yuantiku.com，那么只需要在Filter栏中填入yuantiku即可。

2. 在Charles的菜单栏选择"Proxy"->"Recording Settings"，然后选择Include栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了。如下图所示：

image

通常情况下，我们使用方法1做一些临时性的封包过滤，使用方法2做一些经常性的封包过滤。

4. ssl抓取

参考Mac抓包工具之Charles进行设置

详细使用可参考：

1. 通过chrome浏览器调试手机页面(IOS和Android)
2. Mac抓包工具之Charles（包含如何设置证书）

三. 设置手机hosts

为了测试网页在移动设备上的表现，我们往往需要使用真实的设备去访问内网的开发/测试环境。在某些时候，服务器端严格绑定域名（不允许使用 IP 地址访问），而且这个域名往往是虚拟的域名（比如 yoursite.dev 之类），我们就需要在移动设备上配置 hosts。
在不需要手机越狱的情况下，最简便的方法就是通过charles的DNS spoofing功能：打开charles->proxy->DNS spoofing，点击add，添加对应的域名和ip地址。