使用Charles实现本地数据mock

最新推荐文章于 2024-07-07 10:37:03 发布
最新推荐文章于 2024-07-07 10:37:03 发布
阅读量1.4k 收藏 3
点赞数 3
分类专栏： 开发工具 文章标签： windows reactjs chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Raleway/article/details/104335725
版权

使用Charles实现本地数据mock

 

 

一、老版本Charles使用

  1. 准备Charles工具,没有的话去下载(https://www.charlesproxy.com/latest-release/download.do)，如下图这玩意image.png

  2. js发送axios请求

    image.png

  3. 桌面新建mock文件(不一定要桌面，其他位置也可以，只要记住就行)

    image.png

    image.png

  4. 打开charles,步骤如下

    image.png

  5. 勾选Enable Map Local,然后点击Add

    image.png

  6. 根据项目运行地址填写端口号

    image.png

    image.png

  7. 勾选，然后ok

    image.png

  8. 刷新浏览器，如果接口正常返回200，那么恭喜你，你的版本属于比较低的，如果接口还是报404，那么继续往下看吧

 

 

 

 

二、新版本如何使用？

方案一：把之前的host的locahost改成ip,项目使用ip访问即可。

image.png

image.png

方案二 把之前的locahost改为localhost.charlesproxy.com

image.png

image.png

到这里，mock文件的内容也能读取到了。你学会了嘛？

image.pngimage.png

 

 

 

总结：Charles老版本不在支持Host为localhost访问本地文件，可以使用ip进行访问,如果一定要用localhost，请使用映射localhost.charlesproxy.com

 

 

Raleway
关注
专栏目录
Charles使用及mock数据
sinat_38679519的博客
08-01 2795
1、下载charles 3.9.2【破解版地址：https://download.csdn.net/my】 下方有一种方法可破解4.2以前的版本 // Charles Proxy License // 适用于Charles任意版本的注册码，谁还会想要使用破解版呢。 // Charles 4.2目前是最新版，可用。 Registered Name: https://zhile.io Li...
charles mock数据
m0_56687854的博客
06-20 4328
使用Charles mock假数据
Mockman是一款强大且方便的用来本地开启和管理Mock服务的跨平台开源工具
08-07
Mockman 是一款强大且方便的用来本地开启和管理Mock服务的跨平台开源工具。凭借Mockman，你只需要简单的配置Mock服务的本地运行端口、路由、请求格式以及返回数据，即可开启自己的Mock服务
Charles本地mock数据
qq_21696621的博客
04-02 175
之前可以mock本地json数据的，最近突然失效了，访问报404，百度搜索了下，发现Charles版本不支持本地代理了。。。当前使用版本：4.5.6 解决：将原来的localhost配置为本机的ip地址（通过ipconfig查看） 以后都是通过本机ip访问接口就可以访问通了。目前在尝试将版本降为3看看能不能使用localhost ...
使用Charles mock服务端响应数据
最新发布
m0_65431718的博客
07-07 265
客户端受到接口响应数据的限制，无法继续开发或测试，会极大影响开发测试效率。因此需要使用Charles mock接口数据。
使用Charles配置map local进行本地的接口数据模拟仍然出现404错误
浮生离梦的博客
05-09 1483
一、问题出现： 在之前使用 Charles 工具中，点击 Tools，再点击 map Local，再点击 add进行添加的时候，配置好Protocol、Host、Port、Path和Local Path，再进行本地数据的接口请求的时候，仍然报出了404 错误，路径访问不到。 二、问题分析及解决：这是因为新版的Charles，如果默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以导致请求找不到API，一直报 404的错误，对此的解决办法： 先需要在配置接口时，将 Hos
charles-mock数据
谨言的博客
02-22 773
4、在页面上操作，重新请求一次接口，这时候访问的应该就是本地文件了，接口的图标也变成了本地文档的样式。如果保存了一个接口多次的mock数据，在下一次mock接口时，把上一次的接口2取消勾选就可以了。mock接口后，默认下一次是访问本地文件，取消本地访问勾选就可以重新访问服务器。1、通过Charles抓包，找到需要mock的接口，把返回的结果保存到本地。2、打开保存的文件，文件返回的结果/结构改成自己想要的模式，改好后保存文件。3、选中刚刚保存数据的接口，右键选中访问方式，上传本地文件。
使用Charles Mock响应数据
我们仨
04-01 832
1.需求 根据学生的等级显示不同的段位图标，现在想要验证前端展示的段位图标是否正确，是否与UI一致。如下图所示：共17个等级，每个等级对应一个段位图标，共17个图标 例如，一个学生的Level是4，段位图标是秀才，如下图所示，想要展示Level等于5的段位图标应当怎么操作呢？ 2.实现方法 使用Charles打响应断点 Mock响应数据 2.1.使用Charles打响应断点 具体用法参考打响应断点，修改响应数据这篇文章！ 2.2.Mock响应数据 2.2.1.首先，使用Charles
Charles实现mock的方法
热门推荐
weixin_45426071的博客
12-04 1万+
Mock应用场景： 第三方系统数据交互 前后端数据交互 硬件设备解耦 Mock优点： 不依赖第三方数据 节省工作量 节省联调 前置条件： 1. 已经安装好Charles并配置好证书，具体安装可看下这篇文章： Charles安装使用_小小飞侠24的博客-CSDN博客一、charles简介Charles是常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络...
使用Charles实现发送请求代理到本地文件mock，报错404有效解决办法
weixin_42529444的博客
05-05 1187
使用Charles实现发送请求代理到本地文件mock，报错404有效解决办法 今天是第一次使用Charles来实现自己项目的接口mock数据的时候就遇到了坑，好一会找。本来是看着一个教程视频在学习，无奈卡在了第一步。按照视频中一步步下来，视频中就正常拿到数据了，换我这边就是一直在报404。 郁闷… 解决 在不断的和视频中去对对照细节，确认无误之后，一番百度，发现网上都是些使用Charles抓包之...
使用Charles mock数据之Map功能
weixin_43016362的博客
05-22 639
2、右击选择Map Remote后填写请求；或点击Tools-->Map Remote。场景：接口只在特定环境能用或只在特定环境有，将测试环境的接口换成特定环境的接口；2、右击选择Map Local或点击Tools--Map Local填写请求。3、把这些都设置好之后，再次重新请求刚才的接口，可以看页面显示了修改后的数据。1、先请求想要重定向的接口，将接口的返回数据保存到本地，修改成想要的返回数据。功能：将指定的网络请求重定向到另一个请求。功能：将指定网络请求重定向到本地文件。1、先请求想要重定向的接口。
抓包工具charles，版本3.11.3，win32系统（旧版本供大家使用）
03-13
抓包工具charles，版本3.11.3，win32系统（旧版本供大家使用）
Charles 抓包工具教程(五) Charles 如何进行Mock
雨水的早晨的博客
11-12 4863
Charles 进行Mock测试
Charles抓包工具-配置接口mock(图文详解)
qadnkz的专栏
02-23 832
此时浏览器访问https://www.baidu.com时，charles mock接口的返回接口为最新配置的。其中Local path 指定设置好的json文件，注意文件扩展名最好设置为json，如下。配置访问百度时，mock接口，指定返回结果，设置如下，点击ok。1、保证charles可以正常抓包，charles抓包配置如下。
charles 断点 弱网络测试 修改本地内容操作
weixin_66336481的博客
04-20 367
设置断点 先选择接口 右键选择，选择breakpoints (确认使用断点功能) 然后点击proxy，选择breakpoint settings... 进入设置breakpoint settings页面 点击对号，选择已经存在的数据，删除 点击add添加新数据 填写数据的内容 查看是否成功添加数据 点击OK，到浏览器重新搜索。抓包 修改搜索内容并保存 弱网络测试 从proxy中找到throttle settings ...
通过抓包软件Charles和Fiddle快速模拟(Mock)数据
weixin_30436101的博客
07-25 497
使用Charles实现本地数据mock 由于在实际开发中，一般进行前后端分离，通过接口来进行数据交互。所以我们使用charles-proxy来进行模拟数据接口。Charles能够抓取浏览器发起的请求，然后做出一些处理和返回。官网下载 配置参考 注册账号(不注册的话，30天会过期，每隔一段时间会关闭一次) 账号：https://zhile.io 密码：48891cf209c6d32bf4 ...
charles的简单操作
qq_72697024的博客
08-08 1484
Charles的设置和使用
Charles抓包工具系列功能之mock数据（一）
weixin_49353386的博客
07-17 2280
Charles抓包工具系列功能之mock数据（一）
【Charles】charles进阶操作之mock操作
liangzai2D108的博客
04-24 2840
charles进阶操作之mock操作，最容易上手的测试工具没有之一
如何使用charles进行数据mock
04-26
使用 Charles 进行数据 mock，需要进行以下步骤： 1. 打开 Charles，选中需要 mock 的请求，右键选择 “Breakpoints” -> “Enable breakpoint” 使该请求被拦截。 2. 发送该请求，Charles 会弹出一个窗口，选择 “Edit Request”。 3. 在 “Edit Request” 窗口中，将 “Breakpoints” 选项卡中的 “Breakpoint” 勾选取消，然后修改请求参数或者返回内容，以达到 mock 的效果。 4. 修改完毕后，点击 “Execute” 按钮，将请求发送出去，此时 Charles 会记录下该请求和响应，同时也会保存你修改的 mock 数据。 5. 在 Charles 中，可以通过 “Tools” -> “Map Local” 来创建本地映射，将指定的请求映射到本地文件或者 URL，实现数据 mock 的效果。 需要注意的是，在 mock 数据时，需要保证修改后的请求和响应格式与原始请求和响应格式一致，否则可能会导致请求或响应无法解析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值