whistle 一个神奇的前端调试工具(抓包\代理工具)

news2025/1/18 6:28:57
在进行前端开发过程中,我们常常需要对一些接口进行处理,以及当后端接口没有弄好需要我们mock一些假数据,针对这些场景,我们就可以使用 whistle 来解决。
首先,我们要知道能满足我们需求的工具有很多,例如:charles、fiddler等。但是这些工具有个非常不友好的点,那就是它们需要 付费使用,当然我们一般都是通过一些方法,来免费使用的。这里就不说了。
  1. 安装whistle

  1. 首先我们要确保我们有安装node。

node -v

出现以下内容,就说明我们本地有安装node。

反之,我们就需要对node进行安装
1. Windows或Mac系统,访问 https://nodejs.org/,安装 LTS版本的Node,默认安装即可。
2. Linux下推荐使用源码安装: 从 Node官网下载最新版的 Source Code(或者用wget命令下载),解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z),依次执行./configure、./make和./make install。

tips:(Windows系统可能需要重新打开cmd)
  1. 使用包管理器安装

我们这里以npm为例,当然如果有安装yarn、pnpm等的话可以使用其他的包管理器进行安装。
npm install -g whistle
当我们使用 w2 help能有正常的信息展示就说明了,whistle安装成功了。
  1. whistle命令

启动whistle:
$ w2 start
Tips: 如果要防止其他人访问,可以在启动时加上登录用户名和密码 -n name -w password。
重启whsitle:
$ w2 restart
停止whistle:
$ w2 stop
修改 whistle 监听的端口,默认为 8899
w2 start -p port
开启全局代理 (适用于无法安装Proxy SwitchyOmega等浏览器插件的朋友)
w2 proxy
关闭全局代理
w2 proxy off
  1. 配置whistle工作环境

  1. 浏览器插件安装Proxy SwitchyOmega

Tips: 若无法打开「chrome 应用商店」的朋友,可以使用上面的全局代理的方式进行启动whistle。
对插件进行配置
  1. 安装根证书(捕获HTTPS请求)

正常启动后使用本地端口打开即可

这里以mac为例
找到证书下载地方,点击进行安装。
打开证书管理界面,找到带有 whistle 的字样的证书并对其进行「始终信任」
  1. 简单配置规则进行实践

  1. 设置响应头,临时允许跨域(用于解决后端暂未配置cors的时候,临时调试)

# 自动添加cors头 可以在服务器没有配置cors的时候,进行临时调试
https://www.baidu.com/ resCors://{resCors.json}
  1. 对js增加一些调试信息(推荐使用VConsole,对H5、小程序以及移动端进行调试)

# 对一些页面预追加VConsole,便于移动端进行调试。
https://www.baidu.com/ jsPrepend://{log.js}
# https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js 将这个js保存然后

# 初始化VConsole
new VConsole();
手机端等的环境进行调试,可能就需要安装证书了。我们点击右上角的online 查看本地的 IPv4
然后,找到和当前电脑处于同一个局域网Wi-Fi的手机,对wifi进行配置
代理方式:手动
代理服务地址:10.*.*.*(上述代理的 IPv4
代理端口:8899(重要,重要,重要,此处代理的是whistle的启动端口)
然后手机访问 rootca.pro 下载证书,进行安装
ios 下:设置 => 通用 => 证书信任设置,打开刚刚安装的证书的开关
安卓: 设置=> 搜索证书 => 从存储设备安装证书 =〉进行安装即可
  1. mock响应json数据

# mock测试需要的一些接口实际还未好但是开发确需要的假数据
https://www.baidu.com/api resBody://{res.json}
  1. 线上js资源使用本地js进行替换

# a.js => b.js 其中b.js 可以是 http://localhost:4001/output/module/* 等形式
/passport.baidu.com/passApi/js/ {log.js}

当然,whistle还有很多调试的用法,这里就不一一列举了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/335248.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第十五章 栅格数据重分类、栅格计算器、插值分析

文章目录第十五章 栅格数据分析第一章 栅格数据重分类第一节 栅格数据重分类第二节 栅格重分类的使用第三节 重分类的使用中的空值使用第四节 重分类的案例:分类统计面积第五节 坡度矢量分级图生成第二章 栅格计算器第一节 栅格计算器介绍第二节 栅格计算器使用第三…

操作系统题目收录(六)

1、某系统采用基于优先权的非抢占式进程调度策略,完成一次进程调度和进程切换的系统时间开销为1us。在T时刻就绪队列中有3个进程P1P_1P1​、P2P_2P2​和P3P_3P3​,其在就绪队列中的等待时间、需要的CPU时间和优先权如下表所示。若优先权值大的进程优先获…

Revit怎么生成电线和电器配件,管道附件?

一、Revit中如何自动生成电线 首先框选所有的照明设备,使用过滤器命令,只选中照明设备,如图1所示。 框选之后会出现创建电力系统的界面,选择如图2所示电力的命令。 出现图3中所示选择弧形导线或者带倒角导线,即可以自动…

【数字孪生百科】每周认识一个数字孪生要素 —— 玫瑰图(Rose Diagram)

简介玫瑰图(Rose Diagram),也称之为南丁格尔玫瑰图,极坐标区域图,鸡冠花图,是一种圆形的直方图,是由弗罗伦斯・南丁格尔所发明,用以表达军医院季节性的死亡率的一种图表。由于半径和…

零入门kubernetes网络实战-12->基于DNAT技术使得外网可以访问本宿主机上veth-pair链接的内部网络

视频地址(稍后上传) 本篇文章测试如何让veth pair链接的内网网络可以被本局域网的其他宿主机访问到? 1、测试环境介绍 一台centos虚拟机 # 查看操作系统版本 cat /etc/centos-release # 内核版本 uname -a uname -r # 查看网卡信息 ip a s eth02、网络拓扑 3、操…

银行零售如何更贴近客户?是时候升级你的客户旅程平台了

随着数字化战略推进,各大银行持续加大对线上多渠道的建设投入,客户触达也愈发移动化、智能化。与此同时,手机银行飞速发展产生并累积了大量客户行为数据,呈多样化、海量化等特点,将在用户体验、客户经营、手机银行运营…

SaaS的阴暗面:网络攻击武器化、平民化

你不一定懂编程,甚至都看不懂几行代码,但依然能成为杀伤力十足的黑客,这就是现阶段不少网络攻击的特点:不需要掌握娴熟的技术或代码,仅仅利用成熟的武器化工具,就能通过简单的“一键操作”,对目…

【Java基础】018 -- 面向对象阶段项目上(拼图小游戏)

目录 拼图小游戏(GUI) 一、主界面分析 1、练习一:创建主界面1 2、练习二:创建主界面2(JFrame) 3、练习三:在游戏界面中添加菜单(JMenuBar) ①、菜单的制作 4、添加图片&a…

传奇开服架设要具备什么条件

传奇开服架设要具备什么条件 新手如果想开服的话因具备哪些条件?我来为您解答 1.传奇SF开服的话你要清楚 具体的有哪些步骤 需要的哪些东西 自己一定要先了解清楚!因为这行的话 PZ比我们IDC服务器商都还要多。 {开服的话一定要了解清楚开传奇的一个具…

python(15)--函数设计

前言 函数是可重用的程序代码块。 函数的作用,不仅可以实现代码的复用,还可以保证修改函数的代码时,所有调用该函数的地方都能得到体现。目前我已知函数的作用是:对代码实现了封装、函数调用、传递参数、返回计算结果等。 正文 …

可控硅原理(单向可控硅和双向可控硅)

晶闸管(Thyristor)又叫可控硅,按照其工作特性又可分单向可控硅(SCR)、双向可控硅(TRIAC)。其中双向可控硅又分四象限双向可控硅和三象限双向可控硅。同时可控硅又有绝缘与非绝缘两大类,如ST的可控硅用BT名称后的“A”、与“B”来区分绝缘与非绝缘。 …

SpringCloud(18):Sentinel流控降级入门

Sentinel本地应用流控降级实现分为三步: 创建本地应用搭建本地Sentinel控制台本地应用接入本地Sentinel控制台1 本地应用创建 整体流程分析 创建springboot项目在项目的pom.xml文件中引入sentinel-core的依赖坐标创建TestController,定义使用限流规则…

java面向对象

3.面向对象 3.1 类和对象 public class Main{public static void main(String[] args) { /* 1.面向对象学习的三条主线1.1 类的结构:属性、方法、构造器、代码块、内部类1.2 面向对象的三大特征:封装性、继承性、多态性1.3 其他关键字:this…

当我把ChatGPT机器人拉到微信群里,群友都玩疯了!!!

大家好呀,我是飘渺!最近ChatGPT可谓是火出天际,人工智能领域的股票最近都被这家伙带的一路狂飙,如果到现在你都没听过或使用过的话那你可能是有点out了。今天的文章并不打算介绍ChatGPT,而是要带大家玩一件好玩的事。将…

泰克示波器采样率问题解答

1. 怎样选择示波器的采样率?采样率通常由带宽决定。高斯响应的泰克示波器通常而言采样率需要是带宽的 4 倍或更高。2. 选择具有最大额定采样率的示波器, 足以提供示波器的额定实时带宽吗?示波器的最大额定采样率与其实时带宽密切相关。 简单来讲,“实时”表示在单…

【C++】C++入门 类与对象(一)

类与对象(一)一、类的引入二、类的定义1、类的两种定义方式:2、成员变量命名规则的建议:三、类的访问限定符及封装1、访问限定符2、封装四、类的实例化1、类的实例化概念2、类对象的大小的计算五、this指针this指针的特性一、类的…

1.Redis【介绍与安装】

1.常用数据库介绍 mysql的表类型[表引擎.存储引擎],memory表结构和表数据分开存储的,表结构保存在硬盘中,表数据保存在内存中memcache是一款软件,可以使用键值对的格式保存数据到内存中redis是意大利的工程师开发的开源免费的告诉缓存数据库,需要注意的是作者本身只开发了linu…

1 Flutter UI Container和 Text 和图片组件

一 Text 组件Text 文本组件的一些属性如下body: const Text("this is leonardo fibonacci",// 文本对齐的方式textAlign: TextAlign.center,// 文本方向textDirection: TextDirection.rtl,// 字体显示最大的行数maxLines: 2,// 文字超出屏幕之后的显示方式 ellipsi…

Postgresql中null值和空字符串

NULL和空字符串不同数据库的表现 null和空字符串在不同的数据库中表现不一样,找了一张图,可以很清晰的对比了解。 首先null不是一个空字符串,也不是一个为零的值,上图,Oracle将NULL和空字符串都视为NULL。PostgreSQL…

UDP协议详解

目录 前言: 再谈协议 UDP协议 比较知名的校验和 小结: 前言: UDP和TCP作为传输层非常知名的两个协议,那么将数据从应用层到传输层数据是怎样进行打包的?具体都会增加一些什么样的报头,下面内容详细介绍…