chrome 使用本地替换功能修改接口返回的数据并显示在前端页面

于 2024-08-20 17:12:52 发布
阅读量322 收藏
点赞数 3
文章标签： chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46582389/article/details/141363360
版权

1、替代内容，本地选择文件夹，允许权限

2、源代码修改接口返回参数，修改完CTRL+S保存

3、CTRL+R刷新页面，重新请求接口，页面加载，请求接口有标识，完成

星光不负赶路人！
关注
uniapp - 最新详细实现Google谷歌授权登录配置流程及示例代码教程，前端H5第三方网站调用谷歌登陆获取用户头像及邮箱用户信息数据，国内web站点接入google开发者平台账号登录（详细代码）
王佳斌
07-26 4026
uni-app，h5，网页，移动端页面，网站，google，谷歌，授权登录，OAuth2.0，详细教程，进不去官网，使用gmail邮箱登录，已获授权的重定向URI，接口报错403，重定向地址，不跳转，出错，网路无法连接，无法访问此网站，uniapp谷歌登录，uniapp 对接谷歌第三方登录，网站接入第三方谷歌登陆，最新谷歌快捷登录，前端，Google账户登录功能，手机网站接入谷歌账号登录，登录报错，重定向不生效，UniApp项目H5本地调试，网站打不开，进不去，uniapp纯前端做登录，对接谷歌第三方登录，
chrome插件API中文版
12-24
chrome插件API中文版，从国外下的，有需要的拿去吧。
chrome 使用本地替换功能替换接口返回内容
lyhDream的专栏
06-19 1938
在web开发或测试过程中，我们经常会需要修改接口返回值来模拟数据进行开发或测试。常用的方式一般通过抓包工具，如charles，或fildder 的功能。例如我们可以使用charles打断点的方式，或者使用charles的map local 功能进行本地替换。本文介绍不通过代理或抓包的方式，在浏览器中进行请求内容的替换。
Charles_打断点修改接口请求&返回数据
测试官
05-18 884
对于测试来说，Charles的作用就是查看我们调用接口的时候接口给我们返回的数据，以此我们来判断bug是出在前端还是后台，一个好的测试，要学会用数据说话，拿出有力的证据来证明这是一个bug，同时也帮助开发人员定位问题所在。
Chrome Network 修改接口返回数据
测试入坑之路
01-02 2519
前端开发在调试过程中，经常需要各种不同的数据来反复调试，所以我们前端程序员会经常在脚手架中集成 mock 或者通过代理的方式去hack的实现，但是现在再也不用这么麻烦了，Chrome 117 原生就支持了，而且体验相当丝滑。这时候浏览器会提示：选择要用来存储替换文件的文件夹，这个文件夹主要作用是用来保存 Mock 的替换文件，方便下次 Mock 请求直接使用。重新发起请求，发现被拦截的接口会有一个高亮的标识，鼠标移入会提示对应的信息，并且响应的数据已经变成了我们修改后的数据。
浏览器修改后端返回值
rechel000的博客
05-29 1397
浏览器修改后端返回值
谷歌浏览器替换接口返回内容
最新发布
weixin_40790248的博客
07-26 327
点击替换后会提示选择一个文件夹来存放接口的数据，新建一个文件夹来存放数据。选择完文件后浏览器会提示是否给权限，选择允许。网络选择对应接口，右键选择替换内容。
chrome-response-override:Chrome devtools扩展程序可即时修改响应，无需安装外部应用
05-05
Chrome响应覆盖 Chrome devtools扩展程序可即时修改响应，无需安装外部应用程序。 使用简单的“查找和替换”步骤提供支持以覆盖API / HTML / *响应。 无需安装外部应用程序。 在Chrome扩展程序中覆盖响应正文的步骤 打开devtools，导航到“响应替代”选项卡 点击“添加行” 输入URL包含值，仅此URL响应将被修改。 如果要在主页上修改URL，例如 ，但没有URI路径，请在URL包含字段中使用特殊变量~NO_URI~ 。 输入查找值这是一个javascript正则表达式模式。 输入替换值替换为。 无需提供内容类型 单击“保存”以保存所有内容。 单击“播放”按钮开始修改响应。 您必须单击暂停按钮才能停止此修改。 您必须保持此devtools打开 覆盖问题，要么打开私有选项卡，仅在私有选项卡中启用此插件，要么尝试禁用其他与网络一起使用的插件，例
线上前端静态资源代理到本地的几种方式
xiaolengzile的专栏
10-27 1万+
前言我是一个小前端，前段时间开始支持集团监控平台业务。 当我拉下代码，开启本地服务，出现了一大堆请求错误。 原因是：本地的host是127.0.0.1，而接口调用的是线上数据。 接口的host和平台url的host都是x.alibaba-inc.com。 怎么办？我要跨域。。 直接修改hosts是不行的，使用http的withCredentials为真，导致允许跨域的源必须是本地，会导致监
解锁Chrome开发工具的隐藏功能
cnroot001的博客
06-15 1167
chrome浏览器的自带的开发者工具不仅可以调试web应用，也可以模拟终端设备。 开发和测试在工作中也常常会用到chrome开发者工具，它有很多隐藏的小功能，运用的好可以事半功倍，提高工作效率。今天来给大家介绍一下： Chrome开发工具打开方式 1、按下键盘F12 2、按下键盘Ctrl+shift+I 3、浏览器导航栏 …–>更多工具–>开发者工具 模拟终端设备 点击红色部分，开启模拟各种机型设备，如果没有你想要的，可以点击Edit进行勾选添加。 另外还可以设置不同手机型号的尺寸、屏幕缩放比例
前端进阶垫脚石-前端工程化
小王的技术库
10-15 625
Jenkins功能特点提供各系统搭建方式，提供基于 Docker 的容器化搭建方式免费多类型 Job插件系统丰富Job 配置灵活提供 Restful 的 API 接口胜在插件系统丰富且完全开源免费缺点是缺少语言环境工作流的模板，使用成本高，服务器需要独立部署和运维CircleCI功能特点基于云端的持续集成服务免费版本受限制，收费提供更多功能缓存依赖安装的数据基于 SSH 访问构建容器开箱即用，配置简化提供 Restful 的 API 接口。
浏览器修改接口返回数据展示在页面上
qq_41154522的博客
03-07 1409
前端自己调试，想修改接口返回来的数据，然后展示在页面上。
前端基础学习-替换当前浏览器url实现第三方页面跳转
小夭的博客
06-07 998
在开发时遇到需要直接替换当前页面，实现第三方页面的跳转 小小记录一下 常规url替换 window.location.replace('http://www.baidu.com') 需要携带参数进行跳转 可以直接进行拼接 window.location.replace(`http://www.baidu.com?params1:${this.params2}&params1:${this.params2}`) ...
Chrome浏览器开发调试
qq_33715850的博客
01-29 340
Chrome浏览器开发调试
前端通过后端返回的dataList数据进行搜索查询
Achong999的博客
10-11 262
【代码】前端通过后端返回的dataList数据进行搜索查询。
前端好帮手，请务必装上这个 Chrome 插件
zz_jesse的博客
01-29 290
‍chrome 浏览器上有很多插件，我最喜欢的只有这一个，因为它解决了我工作中的很多麻烦。相信我，装上它，你的工作会容易很多。后端不愿意造数据的时候，我用它接口返回的数据不理想的时候，我用...
谷歌浏览器插件：修改接口响应、重定向以及拦截url
热门推荐
西凉的悲伤博客
11-05 1万+
对于一般接口测试和开发来说经常需要调试接口，对接口数据拦截修改来查看页面变化。一般会选用Fiddler或Fiddler everwhere来拦截接口调试，Fiddler和Fiddler everwhere都可以拦截电脑的各种应用的请求，Fiddler界面太丑了，而Fiddler everwhere只有30天试用期，所以很不方便。 如果你只想拦截浏览器的请求或修改参数响应，那么一款优秀的拦截url请求的插件你必须拥有： Requestly: Redirect Url, Modify Headers etc 1
浏览器---chrome 高级调试技巧汇总（后期继续添加）
COCOLI_BK的博客
07-26 8424
decodeURIComponent(ody中的参数，即可转义为正)2.post请求修改body里面的参数，可能需要适当的转换。这里修改参数是分两种情况get请求和post请求。4.控制台获取Elements面板选中的元素。1.get请求直接修改url上的拼接参数。10.$i直接在控制台安装npm包。3.复制JavaScript变量。7.控制台引用上一次执行的结果。9."$"和"$$"选择器。2.在控制台快速发起请求。5.截取一张全屏的网页。1.一键重新发起请求。.....................
c# Chrome内核 并调用前端页面
07-11
你可以使用 CefSharp 来在 C# 中嵌入 Chrome 内核并调用前端页面。CefSharp 是一个基于 Chromium Embedded Framework (CEF) 的 .NET 控件，它允许你在 Windows 应用程序中嵌入 Chrome 内核，并通过 C# 与前端页面进行交互。 首先，你需要安装 CefSharp NuGet 包，可以在 Visual Studio 中通过 NuGet 包管理器来完成。安装完成后，你可以在 C# 代码中引入 CefSharp 命名空间，并创建一个 ChromiumWebBrowser 控件来加载前端页面。 ```csharp using CefSharp; using CefSharp.WinForms; // 创建 ChromiumWebBrowser 控件 ChromiumWebBrowser browser = new ChromiumWebBrowser(); // 设置控件的 Dock 属性，使其充满整个窗口 browser.Dock = DockStyle.Fill; // 将控件添加到窗口中 this.Controls.Add(browser); // 加载前端页面 browser.Load("https://www.example.com"); ``` 上述代码创建了一个 ChromiumWebBrowser 控件并将其加载到窗口中，然后通过 Load 方法加载指定的前端页面。你可以将 "https://www.example.com" 替换为你需要加载的实际页面。 通过在 C# 中嵌入 Chrome 内核，你可以使用 CefSharp 提供的 API 与前端页面进行交互，例如执行 JavaScript 代码、捕获页面事件等。具体的交互方式可以参考 CefSharp 的文档和示例。 希望这能帮助到你！如有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值