作者：xiren
转载请注明出处
一、Safari-ios触屏调试
使用场景：
快速进行线上调试，定位样式错乱位置，找出原因。
使用步骤：
1.电脑Safari设置： 打开Safari浏览器 选择偏好设置 - - - 勾选’在菜单栏中显示”开发"菜单'
3.连接调试： iphone手机数据线连接苹果电脑和iphone手机 手机和电脑都要选择允许、信任 在电脑端的Safari浏览器tab栏选择：”开发” - - 选择你的iPhone的名字 - - - 刷新手机Safari浏览器打开的页面 - - - 点击电脑端显示的url链接 - - - 即可打开类似Chrome的调试台
二、http代理的原理
简单来说就是（是不是有点太简单廖）
输入a.com - - - (没有代理) - - - > a.com的服务器
输入a.com - - - (代理服务器) - - - > (正常)a.com
输入a.com - - - (代理服务器) - - - > (替换请求，劫持)b.com内容
三、Charles-截取移动设备的网络请求包
使用场景：
查看app内嵌的webview页面路由及其query参数
如下图手机打开app中的某app的webview页面，可以查看该页面url及其参数
使用步骤：
1.代理设置
proxy - - - proxy settings - - - port - - - 填写8888或者8899都可以 - - - 点击OK
2.手机设置
安装证书（有证书请忽略，无证书在文末有证书安装方法） - - - 代理选择“手动” - - - 填写电脑IP - - - 步骤1设置的端口
3.电脑弹出是否允许访问，点击allow，如果误点deny拒绝，文末有解决办法
4.手机浏览器或者APP进入你所关心的页面刷新，查看电脑Charles列表即可
四、Map Local
使用场景
某个线上页面需要临时加小的改进，如果我们能够对线上的代码实时操作查看结果，那么改动的结果是快速可靠的。
map local就是在这种情境下使用的。
使用步骤
1.电脑打开Charles
2.电脑或者手机浏览器打开对应页面 （这里以小米m站为例）
3.清除Charles列表，刷新要抓取的页面
4.保存页面，右键save response（这里是保存html，如果保存js或者css，同理在Charles的structure列表下按照域名查找）（如果找不到你想抓取的页面js或者css具体url，在后面会写）
如下图点击choose - - - 选择步骤5保存的本地映射文件
7.设置map local 勾选enable map local 点击add 复制完整需要代理的完整url 全部粘入host 点击port或者其他，port和path会自动解析整合
8.开始本地调试 修改本地文件，刷新页面，即可看到修改
备注：
如何得到抓取想要的js、css等静态资源url:
1.页面css和js位置查看与地址copy：
Network - - - js或者css - - - 资源文件 - - - 右键选择copy - - - 选择copy link address
2.保存的html等静态资源文件可能是没有后缀的，自己重命名添加后缀即可
五、Map Remote
和map local差不多，这里不多赘述，如果不会可以留言问我，我加上
六、相关问题整理
1.刷新Charles显示unknown
可能是没有配置Charles proxy CA证书和SSL Proxy。
2.设置Charles proxy CA证书和SSL Proxy步骤
help - - - ssl proxying - - - install Charles root ...
charles proxy... - - - 信任 - - - 始终信任
3.Charles proxy CA 和 SSL Proxy是什么？为什么要配置这两个
其实就是允许Charles可以在你的电脑上作为一个代理服务器，给它一个信任证书。
ssl proxy是https代理，配置了这个才能去拦截https请求
4.手机证书的安装（android和ios）
安卓手机
Wi-Fi打开 — — 代理选择“手动” — — 输入电脑ip、端口号
浏览器打开输入chls.pro/ssl
或者在电脑Charles下载证书传到QQ（因为华为和小米手机自带的浏览器可能打不开chls.pro/ssl），下载操作如下图
QQ保存的文件地址：tencent / qqfile_recv /
更多设置 — — 系统安全 — — 加密与凭据 — — 从存储设备安装
点击安装即可
IOS手机
相对机型众多的android手机来说，ios的就简单多了
Wi-Fi打开输入电脑ip、端口号
浏览器打开输入chls.pro/ssl
通用 — — 描述文件 — — 点击安装的证书
通用 — — 关于本机 — — 证书信任设置 — — 打开所有证书
5.手机第一次连接Charles时点击了deny，导致再次连接不能连接
proxy - - - access control settings - - - add你的手机IP - - - 点击ok
备注：
如果不想每换一个手机都要进行验证，可以配置允许所有手机访问，加入 0.0.0.0/0（IPv4）或::/0（IPv6）（妈妈再也不用担心我误点deny啦）
6.如何模拟慢网
点亮小乌龟即可
