作者:xiren
转载请注明出处
一、Safari-ios触屏调试
使用场景:
快速进行线上调试,定位样式错乱位置,找出原因。
使用步骤:
1.电脑Safari设置: 打开Safari浏览器 选择偏好设置 - - - 勾选’在菜单栏中显示”开发"菜单'
2.手机Safari设置: 打开手机Safari浏览器 找到"高级" - - -勾选 “JavaScript” - - - 勾选“web检查器"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,在后面会写)
5.选择保存本地的路径 6.资源映射 tools - - - map local - - - add 复制页面链接 - - - 全部粘贴入host - - - 因为会自动分割匹配,所以虽然全部粘入host,点击其他,比如port输入框,会自动分割匹配入对应的项下如下图点击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.如何模拟慢网
点亮小乌龟即可