cookies不生效呢
whistle--前端调试利器(安利)
Charles能做什么
- 【过滤网络请求】
- 【截取 iPhone 上的网络封包】 可以抓手机端访问的资源（如果是配置HOST的环境，手机可以借用host配置进入测试环境）
- 【截取 Https 通讯信息】
- 【模拟慢速网络】 支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。
- 【修改网络请求内容】 修改网络请求参数（客户端向服务器发送的时候，可以修改后再转发出去）。 网络请求的截获和动态修改。
- 【给服务器做压力测试】 重发网络请求，方便后端调试，复杂和特殊情况下的一件重发还是非常爽的（捕获的记录，直接repeat就可以了，如果想修改还可以修改）。
- 【修改服务器返回内容】
- 【Map 重定向功能】 支持本地映射和远程映射，比如你可以把线上资源映射到本地某个文件夹下，这样可以方便的处理一些特殊情况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你可以本地随便修改，数据之类的都是线上的环境，方便在线调试）；
- 【Rewrite 功能】
- 【Breakpoints 功能】
- 【设置ssl允许访问地址】
- 【查看连接本机charle代理的ip】
- 【设置请求的黑名单】
- 【缓存请求返回的内容】
- 【本地开发代替nginx】
Charles设置成系统代理
启动 Charles 后，第一次 Charles 会询问你是否把Charles设置为系统的代理，如果此时你忽略了这个询问窗口，你可以在后期设置的；将 Charles 设置成系统代理：选择菜单中的 “Proxy” -> “Mac OS X Proxy/windows proxy” 来将 Charles 设置成系统代理。
非全局抓包时，建议不要设置成系统代理，以免产生异常case。
Charles实践方案
替代nginx实现不同服务地址或端口的调用
【1.设置DNS spoofing】 dev.com 127.0.0.1
【2.map remote】根据path 关键字来匹配 指向的服务
【3.避免前端跨域调用】
前端涉及静态资源引用，这里需要注意下：以前端项目端口为主，可以不用域名
最后这样就很容易指向不同ip或端口的服务，方便联调 http://192.168.1.18:8080/admin/productline?page=1
当然 webpack devserver 也有proxy的功能; 也很方便
devServer: {
contentBase: "./dist",
historyApiFallback: {
rewrites: [{ from: /^\/(login|admin.*)$/, to: "/index.html" }]
},
proxy: {
'/testFace': 'http://localhost:3000'
},
host:"0.0.0.0",
before(app) {
apiMocker(app,
[ path.resolve("./mocker/schema/index.js"), path.resolve("./mocker/api/index.js"), path.resolve("./mocker/api/functionitemmeta.js") ]);
}
},
1.Charles基础配置
1.1Charles两种视图
视图结构
- viewers
Charles 主要提供两种查看封包的视图，分别名为 “Structure” 和 “Sequence”。
- Structure/结构视图，将网络请求按访问的域名分类，比如某个域名下有n个资源请求，那么所有此域名下的请求都会在这里做一个详细的分类；
- Sequence/序列视图，将网络请求按访问的时间排序，按照你的电脑的发送请求顺序进行。
1.2 内容过滤
- 直接过滤域名 sequence视图下使用filter
- 修改Include的域名和端口 在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”，然后选择 Include 栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了;
- 过滤焦点域名
在目标的网络请求上右键，选中focus（此时，该域名已经被设置为一个焦点标记了；）；然后点击fillter后面的focused来筛选你的做的focus标记文件；设置的焦点域名在”focused Hosts”里面可以查看和管理。
在structure模式下看更直观
1.3 Charles截取 Chrome 和 Firefox 浏览器的网络请求内容
-
需要注意的是，Chrome 和 Firefox 浏览器并不一定使用的就是本机，可能是一些代理工具，而 Charles 是通过将自己设置成代理服务器来完成资源记录的，所以如果你的charles无法截取 Chrome 和 Firefox 浏览器的网络请求内容，需要在浏览器里做下修改。在 Chrome 中设置成使用系统的代理服务器设置即可，或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。
-
chrome://settings/?search=%E4%BB%A3%E7%90%86
备注：如果您的chrome有用过改hosts文件工具，请暂时关闭；否则chrome会通过你的扩展控制，不能使用charles；你的chrome中可能会看到您的网络代理设置是由扩展程序管理的。
1.3.1 chrome 使用 SwitchyOmega 连接代理
SwitchyOmega连接pac；或者直接连接charles代理； 这样绕过系统代理配置；对于代理配置冲突的情况下可以使用SwitchyOmega，切换非常方便。
如图192是家中的ip，公司局域网是10网段，这样可以保证开发中使用代理，其他站点访问绕开代理。
使用通配符，ip发生变化这里也不必修改。
1.4 hosts文件工具
charles可以使用系统hosts或三方hosts工具设置的系统hosts配置，也可以使用自带的map remote功能实现映射功能。
- switchhosts 推荐
- Gas mask 2 够用
- Helm 一般
1.5 https协议抓包
- 打开Charles, 点击Help->SSL Proxying->Install Charles Root Certificate
- proxy - proxy settings - proxies - enable socks Proxy
- proxy - proxy settings - Mac OS X - Enable MacOS X - use socks proxy （这个似乎可有可无）
- ssl proxy settings - ssl proxying - add 要代理的https www.baidu.com 443
每步最好重启一下 charles 来保证配置生效。
证书安装
- help - SSL Proxying install charles proxying certificate
移动端使用charles代理
打开Charles，选择help→SSL Proxying→Install Charles Root Certificate on a Mobile Device or Remote Browser
- chls.pro/ssl 安装证书 , ios必须使用safari ，第一步在“描述文件与设备管理”中安装， 第二步：在通用 - 关于本机 - 证书信任设置
IOS 先连接上charles，然后再访问 chls.pro/ssl
- 证书信任设置 启用证书 （fiddler的证书安装和charles基本相似）
mac 安装证书
1.6 断点
- 可以中断挂起请求， 对目标网址进行监控
2. charles进阶配置
1.Map功能
map local情景：一个项目上线后，发现js或者css bug了，怎样调试？线上项目的静态文件无法直接编辑，有何方法在不改变其他参数的情况下直接用本地的开发文件替换线上的文件从而方便调试？
tools->>map local
Save Response… map local可以结合这个功能来mock，稍加修改就可以模式想要的测试数据。
map remote情景：进行一个需求开发，测试环境是：lvxing.st.meituan.com，测试完成，前端开发者上线了，现在QA需要跟踪线上情况，如何切到线上环境？
tools->>map remote
Bypass proxy settings for these Hosts & Domains 绕过charles的配置， 这样charles上的这个配置就失效了，但是不影响hosts工具的配置。
出现冲突时，默认hosts的优先级高
2.rewrite功能
rewrite功能重写对应的内容，主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。
rewrite可以做很多手脚。
use a dynamic port
3. charles高级
1.黑白名单（低频）
charles黑名单和白名单工；black list：阻止对匹配HOST的请求；可以直接把请求丢掉，也可以直接返回403状态码；
配置可以具体到网页参数，网页不想被访问到时，这时黑白名单是很有用的。
黑白名单是个大坑，疏忽大意可能导致charles无法使用。连接设备打不开网页。
2.域名代理 DNS Spoofing（低频）
DNS Spoofing 欺骗，和hosts作用一样
3.修改服务器返回内容
4.常见问题
重启 重启 重启
charles重启 proxy switch omega 重启 chrome重启，
1. charles提示“SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations”
出现这种情况，charles解析不出path，我们就没法建立映射。 具体的解决方案为在proxy中的SSL Proxying setting中钩上Enable SSL Proxying，并且将要解析的host加上
2. Proxy-->Proxy Settings中在options中加入hosts： bypass charles for these Hosts &Domains
3. 无法访问localhost or 127.0.0.1
- 无法访问localhost or 127.0.0.1:将访问地址的 localhost 改为 localhost.charlesproxy.com
4. 常见问题 www.cnblogs.com/1-434/p/787…
5. https无效证书问题以及忽略证书错误
safari浏览器可以通过信任证书来解决， 但是在app中缺少“继续访问不可信站点的设置”。
fiddler 是这样解决的 ignore server certificate errors
6.charles界面看不到请求内容？
- 如果有多个设备连接，都尝试一下请求，排除因设备配置原因造成的问题
- 如果其他设备正常，例如手机端请求可以走代理, pc端不能走代理可能有几个原因：
- 使用了pac代理或其他代理
- 本地hosts工具配置映射和charles冲突，hosts优先级更高
7.浏览器世界的正确referer
referer的正确英语拼法是referrer由于早期http规范的拼写错误，为了保持向后兼容就将错就错了，但也有新的网络技术纠正此问题，所以拼法不一
8.PAC自动代理文件格式，如何写PAC文件
最基本的写法就是一个function函数
function FindProxyForURL(url, host) {
var lastPos;
var host_tmp = host;
var prefix = '*.';
do {
if (autoproxy_host.hasOwnProperty(host_tmp)) {
return 'PROXY proxy.oasec.mycomp-int.com:8080';
}
lastPos = host.indexOf('.') + 1;
host = host.slice(lastPos);
host_tmp = prefix.concat(host);
} while (lastPos >= 1);
return 'DIRECT';
}
9.charles代理处理问题时要检查map remote
10.map remote要注意相对路径下的静态资源
本想用工具快速处理一下代理，做个静态页面映射方案，但静态资源依赖逻辑工具是不能提供的，即使用工具的一些规则实现了静态资源定位成本也是相当高。 所以还是要写一个服务像webpack-dev-server。
允许设备连接
一般情况下，当用户手机配置完代理后电脑charles会弹出一个弹框，如果没有出现点击Proxy->Access control settings，添加你的手机IP。 (1) 将help -> Local IP Addresses 中的本地IP手动写入到：Proxy -> Access Control Settings中
第二种方法： 在 Proxy -> Access Control Settings中添加个：0.0.0.0/0。 在Charles中的Proxy setting中如下勾选并配置端口号
11. Invalid Host header
webpack.config.js 和 vue-cli版本3.0的情况下修改vue.config.js的配置
devServer: {
disableHostCheck: true,
}
官网
see also
非常完整charles教程 不要自己瞎研究,这篇以及内容链接已经整理的非常好
Fiddler使用手册
过滤器
SwitchyOmega和charles配合使用替代nginx www.jianshu.com/p/5d3a88381…
