最明白的charles教程（三）我使用了【mdnice】排版，导致，内容过于庞大，一次性无法放下，只能连载相关章节

让你明明白白学知识，有代码，有讲解，抄的走，学的会！

我使用了【mdnice】排版，导致，内容过于庞大，一次性无法放下，只能连载

8、charles 只抓特定的ip

❝
现在面板抓到的数据太多了，对我们实际开发中会形成很多干扰因素，现在单独针对某个ip 或者域名进行抓取

点击添加

http协议默认的端口是 80

http://www.baidu.com
协议是 http
host 是  www.baidu.com
端口是 80

https 协议默认的端口是 443

httts://www.yuque.com
协议是 https
host 是  www.yuque.com
端口是 443

如果有域名，域名一般会进行解析到 ip对应的 80 端口这个是常识问题，就不过多纠结

如果就是 ip 没有解析进行域名解析，那host 直接填写ip 就行，端口如果有特殊设置，就填写特殊设置的，ip 没有特殊设置的话，https协议的默认也是 443

有时候是在是纠结，不知道怎么填写

window.location

够直白了吧

然后，后面的操作就是清除记录，重新刷新页面

上面可以看到，目前只有 yuque.com 这个域名的请求被记录了

如果有不想记录的，在刚才那个面版设置中，有一个 exclude

那么，被填入的名单，则不会被charles 抓取请求数据

9、断点

❝
因为有上面的那个抓取白名单，这里演示断点，会清晰一些，没有干扰的无效请求

先说说断点的作用和使用场景

作用： 拦截请求或者响应

使用场景：

1、服务端有一些数据过来了，我想测试，我的那个「溢出的文本省略点点点」会不会生效，我将相应内容修改的超级多，测试UI显示效果

2、请求数据，可能有几种情况，中途在发送请求之前拦截，将数据改写，再发送到服务器

3、同一个界面，返回数据不同，则显示效果不一样，又不想去数据库造n种情况的数据，改写拦截中的响应数据，测试UI的表现效果，也验证 js 动态显示隐藏是否都到位了

上面我随便列举了几个场景

有人会说，我直接 chrome 中，在 Elements面板直接修改DOM 中的数据，不就解决了 场景1

还有，我直接在获取相应数据的地方，使用 "test".repeat(100) 也可以解决 场景1 问题

还有我js中直接在 js的请求处，写静态数据，就可以测试 场景2和场景3的效果

当然，场景3 前端写死数据，在UI界面比较复杂多情况下，在多组件通讯的场景中，非常容易出现场景未涵盖的情况

上面列举了场景，还有通用的方式，那如果是 h5 在嵌入在某个容器内的情况呢？（容器可以是 App, 可以是微信小程序等）

使用charles 演示 演示目标，抓取语雀

演示的域名地址 https://www.yuque.com

同样开启 Proxy --> Recording setting 只抓语雀

非期望数据.png

有人知道设置这里，但是发现只能抓取到 https://www.yuque.com 根路径到请求，子路径的数据没有被记录，不知道为什么？

以下的请求实际是抓取到了，但是一律不会被记录

❝
https://www.yuque.com/a.js
https://www.yuque.com/article/b.html
https://www.yuque.com/article.css
https://www.yuque.com/article.js

原因： path里面没有指定通配符，所以，charles 认为你只抓根路径的

通配符记录子路径请求.png

对整个网站打断点

Proxy --> Break Point Settings

Scheme 可以表示对 GET或者 POST请求打断点，不选点话，下面匹配规则中所有点请求都打断点

重新刷新页面，则所有的请求会先经过 charles

我尽量用图说话，文字太多，挺烦的；开启断点，表现就和图中一样

对整个站点进行断点，意义不大，除非是做整站爬虫，数据分析

对某个接口/请求打断点

开发中常见的就是对某个接口打断点

做测试到接口 https://www.yuque.com/api/explore/docs?limit=5

设置路径：顶部菜单栏--》 Proxy--> Breakpoint Setting

语雀默认是获取5条数据, 现在，修改为10条，且将返回值进行修改

从gif图中，可以看到，我们对请求和响应到数据进行了篡改，原本获取5条，现在获取10条数据；且我们增加了请求参数 age, 只是后台没有任何逻辑解析这个参数而已

我们可以GET 到的点是抓包工具在实际到应用场景中可以修改请求数据

场景1: 后台有一个接口，如果传了 current 和 pageSize 就具备分页，如果没传，就将数据都返回

场景2: 有一个保存数据的接口，入参具有动态性，此时测试保存后，数据回显就有必要；如果有 pdf 做pdf预览场景，如果有头图，就展示头图

//  接口参数可能具有 pdf
{
    name: '张三',
    roleIds: [1,2,3]
    pdf: 'http://xxx.pdf'
}

// 接口参数可能就没有 pdf 但是有headImg
{
    name: '张三',
    roleIds: [1,2,3],
    headImg: 'http://xxx.png'
}

最明白的charles教程（二）最明白的charles教程（四）

最明白的charles教程 （三）

8、charles 只抓特定的ip

9、断点

对整个网站打断点

对某个接口/请求打断点

最明白的charles教程（三）