前端请求调试工具推荐

简介: 首先从官网下载并安装Proxyman 打开软件,你可以看到主界面上会有很多个请求依次弹出

Proxyman


安装

首先从官网下载并安装Proxyman

1682523437(1).png

打开软件,你可以看到主界面上会有很多个请求依次弹出

1682523465(1).png

这些就是我们电脑发出的请求,并且你可以从client一栏识别出是哪一个app发出的请求


捕获localhost


在开发中我们一般会在localhost调试本地程序,但是你会发现无论怎么刷新都无法在proxyman中发现localhost的请求

这是因为proxyman默认屏蔽了localhost的所有流量,那我要是非要看localhost呢?

当然也有解决办法,有两种方案可以解决:

替换URL

使用localhost.proxyman.io代替localhost。比如你的web地址是http://localhost:8001开启proxyman客户端之后在浏览器中访问http://localhost.proxyman.io:8001就可以监控到本地的流量了。proxyman会把localhost.proxyman.io的DNS设置为127.0.0.1

修改hosts

改写本地的hosts文件

$ sudo vim /etc/hosts
复制代码

添加hosts记录

127.0.0.1 proxyman.local #ipv4
 ::1 proxyman.local # ipv6
复制代码

然后保存,使用proxyman.local替换原来的localhost(同方法一)

可以看到本地的流量都被抓取到了(方法一必须在proxyman客户端开启时才会生效)

1682523503(1).png


改写响应


改写响应可能会需要安装证书,这个客户端会弹出提示,根据提示安装即可

找到我们需要改写的请求,右键点击依次选择:Tools->Breakpoint,此时会弹出一个窗口,取消request的勾选,点击Done

1682523534(1).png

然后刷新页面,再次发送刚才的请求,等待接收到服务端响应之后会弹出一个窗口,点击body修改响应,然后点击右下角Execute

1682523553(1).png

回到页面就可以看到,响应已经被我们修改成功了

1682523576(1).png


Requestly

Requestly 是一款 chrome 浏览器的插件,可以去 chrome 应用商店下载,需要一点特殊的手段(科学)。

安装完成之后点击插件,点击 open app 进入到应用界面,创建于第一个规则,这里选择Modify API Response

1682523604.png

我们来拦截一下mock 数据试试,原数据长这样

1682523623(1).png

渲染效果如下

1682523647(1).png

我们将其 total 修改为 9

1682523667(1).png

可以看到 total 已经成功被修改

这是返回静态数据,还可以通过JS Script 的形式返回数据,我们来修改一下刚才的规则,先看一下可以拿到哪些数据

function modifyResponse(args) {
   const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
   // Change response below depending upon request attributes received in args
   console.log('method', method)
   console.log('url', url)
   console.log('response', response)
   console.log('responseType', responseType)
   console.log('requestHeaders', requestHeaders)
   console.log('requestData', requestData)
   console.log('responseJSON', responseJSON)
   return response;
 }
复制代码

可以从控制台打印信息中看到这几个字段的含义

  • method:请求方法
  • url:请求地址
  • response:响应体(Text 类型)
  • responseType:响应数据的类型
  • requestHeader:请求头
  • requestData:请求携带的数据
  • responseJSON:响应体(格式化的 JSON)

1682523692(1).png

我们可以通过逻辑来控制返回的数据

function modifyResponse(args) {
   const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
   // Change response below depending upon request attributes received in args
   const {code, data} = responseJSON
   if(code === 0) {
     data.total = 9
     return JSON.stringify(responseJSON)
   } else 
     return response;
 }
复制代码

这样相对于直接返回静态数据来说可以只在接收正常数据的时候修改数据,如果返回异常可以将异常原样返回。


XSwitch


同样作为浏览器插件,Requestly 只能修改响应的数据,XSwitch 可以更改请求的目标,这在我们的开发中也是很有用的,可以将线上的请求转发到本地的后端服务,用于调试后端的 bug。

首先同样需要去 Chrome 商店安装插件,安装完成之后打开面板可以看到很简洁的一个面板,使用起来也行对比较简单。

1682523727(1).png

proxy 字段用来做转发,会将每一个子数组的第一项转发到第二项,如果需要处理跨域可以在 cors 字段中添加目标域名。

值得一提的是 proxy 支持正则匹配

{
   "proxy": [
     [
       // 原始替换地址
       "https://www.a.com/(.*)",
       // 替换后的地址
       "https://localhost:8080/$1",
     ],
   ],
 }


相关文章
|
7月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
325 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
7月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
319 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
11月前
|
存储 缓存 监控
|
Web App开发 监控 前端开发
前端必备浏览器调试工具
【8月更文挑战第19天】前端必备浏览器调试工具
573 0
|
8月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
387 1
|
10月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
282 8
|
11月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
97 18
|
11月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
11月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
160 2