首页 > 其他分享 >【前端开发】新版Chrome浏览器接口mock调试技巧,超实用

【前端开发】新版Chrome浏览器接口mock调试技巧,超实用

时间:2023-10-16 11:13:04浏览次数:47  
标签:返回 Chrome 接口 替换 文件夹 mock 面板 前端开发 Mock

给大家分享一个 Chrome117 更新中最实用的一个功能:在 Network 面板中发送 mock 请求。

修改返回响应数据

想要修改接口返回的数据,设置成特定的数据,首先打开 网络(Network) 面板,找到你需要Mock的接口,右键然后选择替换内容(Override content)

 

这时候浏览器会提示:选择要用来存储替换文件的文件夹,这个文件夹主要作用是用来保存 Mock 的替换文件,方便下次 Mock 请求直接使用

点击 选择文件夹:

 

选择我们刚刚新建的文件夹,我是在电脑桌面上新建了一个空的文件夹 chrome_devtools, 选择之后会提示允许完整的访问权限, 一定要注意点击 允许:

 

这个时候 DevTools 会自动跳转到 源代码/来源(Sources) 面板,并且会生成对应请求的 Mock 文件:

 

编辑 Mock 文件,自定义一个 JSON 数据格式然后保存:

 

重新发起请求,发现被拦截的接口会有一个高亮的标识,鼠标移入会提示对应的信息,并且响应的数据已经变成了我们修改后的数据

 

当然除了修改接口返回的内容以外,我们还可以修改返回的响应头

修改返回的响应头

想要修改接口返回的响应头,增加我们想要返回的 key:value,首先打开 网络(Network) 面板,找到你需要Mock的接口,右键然后选择替换标头(Override headers)

 

右侧面板会直接出现 添加标头 按钮:

 

点击添加,这里我们添加一个 Test-Header: testHeader 做个简单的测试

 

 

也可以直接打开 源代码/来源(Sources) 面板,找到对应的文件 .headers 文件中直接添加,两种添加方式效果一样

 

再次重新发起请求,发现响应头中已经返回了我们设置的 Test-Header: testHeader

 

查看我们开始新建的 chrome_devtools 文件夹,发现 Mock 的数据都已经保存到文件夹中了

 

清除拦截的 Mock 数据

当我们 Mock 数据程序调试完成之后,想要调用真实的接口数据,这个时候一定要记得清除 Mock 替换文件:

打开 源代码/来源(Sources) 面板,取消勾选 启用本地替换 或者直接点击清除图标清除即可:

 

 

 

标签:返回,Chrome,接口,替换,文件夹,mock,面板,前端开发,Mock
From: https://www.cnblogs.com/xiaohuizhang/p/17766903.html

相关文章

  • 关于 Chrome 开发者工具 Network 面板里观察到的 net ERR_CERT_AUTHORITY_INVALID 错
    我在Chrome访问一个网站时,在Chrome开发者工具Network面板里观察到的netERR_CERT_AUTHORITY_INVALID错误:net::ERR_CERT_AUTHORITY_INVALID这种错误通常会在你试图访问的网站的SSL证书存在问题时出现。SSL(SecureSocketLayer)证书用于建立用户和网站服务器之间的安......
  • Chrome 118 版本中的新功能
    GoogleChrome的最新版本V118正式版2023/10/10发布,以下是新版本中的相关新功能供参考。本文翻译自NewinChrome118,作者:AdrianaJara,略有删改。以下是主要内容:使用@scopecss规则在组件中指定特定样式。有两个新的媒体功能:scripting和prefers-reduced-transparenc......
  • 【前端开发】前端使用Tailwind CSS写样式效率翻倍
    vite+Vue项目配置教程配置地址:https://tailwind.nodejs.cn/docs/guides/vite中文文档:https://tailwind.nodejs.cn/docs/installation说明:使用TailwindCSS可省略写繁琐的css代码,通过用class快速布局,如下图页面全是class,很少会写css代码。 例子:创建variable.css文件,代码如下......
  • 【前端开发】前端开发都应该知道的vueuse
    前言:我们在写项目业务时进场会要封装一些工具函数,经常会遇到重复造轮子现象,这里给大家普及下vueuse,是基于Vue组合式API的实用工具集。比如如下简单的几个例子:useDateFormat   时间格式处理函数useTimeAgo     几小时/上周前等处理函数 useMouse     ......
  • 【前端开发】vue3+vite项目部分优化
    1、使用rollup-plugin-visualizer可视化分析包npmirollup-plugin-visualizer-S在vite.config.js中引入 在plugins里面 然后执行npmrunbuild就自动打开可视化分析2、CDN加速在vite.config.js中引入import{autoComplete,PluginasimportToCDN}from"v......
  • 前端 - 使用json-server搭建单机mock平台
    使用json-server搭建单机mock平台 简介json-server是一个Node模块,可以指定一个json文件作为数据源,运行Express服务器。可以用来在本地快速搭建一个RESTAPI风格的后端服务,模拟服务端接口数据。官网地址:json-server-npm(npmjs.com)Github地址:GitHub-typicode/json-se......
  • The Chrome Sandbox Part 2 of 3: The IPC Framework
    Thispostisthesecondpartofa3-partseriesabouttheChromesandbox.Inthefirstpost,IpresentedabasicoverviewoftheChromeprocessarchitectureandpresentedabreakdownoftheattacksurfacesforperformingprivilegeescalations.Thispostc......
  • EasyMock 使用方法与原理剖析
    https://www.ibm.com/developerworks/cn/opensource/os-cn-easymock/ Mock方法是单元测试中常见的一种技术,它的主要作用是模拟一些在应用中不容易构造或者比较复杂的对象,从而把测试与测试边界以外的对象隔离开。编写自定义的Mock对象需要额外的编码工作,同时也可能引入错误。Ea......
  • 【前端开发】免费统计个人网站、网页访问次数、访问设备、访问人地点等数据教程
    前言:在该网站选择小组件样式、生成代码后插入到自己的网页即可网站地址:https://whos.amung.us/第一步:选择小组件样式,并生成代码 第二步:将代码插入网页 第三步:网页中会出现统计次数小组件,点击小组件会跳转到统计详情页 最后,统计详情页会看到统计到的次数、地域、设备等......
  • 1前端开发
    前端简介"""强调:前端和数据库学习的时候跟python一毛钱关系都没有前端的学习是非常简单的但是也很枯燥没有太多的逻辑数据库的学习有点难度但是主要还是以记忆为主大量练习肯定能掌握ps:前端数据库学不好完全就是因为自己不够努力记的少了练得少了......