首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >whistle工具全程入门

whistle工具全程入门

作者头像
IMWeb前端团队
发布于 2017-12-29 02:03:13
发布于 2017-12-29 02:03:13
2.7K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求、包装请求、本地调试和移动端代理开发调试等。多多少少,fiddler和Charles使用起来还是有些区别,不过还好都是可视化的界面使用配置起来也都比较方便。

先说下使用体验。对于一个追求高效的开发者来说,总是觉得要经常切换两个工具的使用比较麻烦,但是配置规则不通用,fiddler+willow组合的使用很不错,但也总是让电脑比较慢,而且规则配置需要点击输入显得不那么高效;Charles是mac上一款不错的网络代理工具,不过是收费的,价格不便宜(当然你可以找破解),但是路径替换功能使用起来比较麻烦,这点体验很不好。在两个平台上都折腾过,而且要经常切来切去(自己的电脑是windows),后来决定尝试入坑whistle(由avenwu@tencent开发),发现非常高效易用,解决了困扰多年的问题。这里总结梳理下常用的功能和使用方式。

whistle文档入口在这里,安装入门使用和原理介绍略过,执行下面命令,然后打开 http://127.0.0.1:8899 就可以了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i -g whistle  #需要配代理的自己配
w2 start

一看就懂,当然文档是比较基础的,内容全,但也比较多,不适合快速入门,所以这里为大家梳理下实际开发中常用的一些规则配置,快速入门,大家可以对应fiddler或Charles的使用对号入座。

使用一键代理切换

安装启动whistle后,通常浏览器需要设置代理指向whistle Server地址127.0.0.1:8899,为了方便切换,chrome下推荐安装使用proxyOmega插件来提高切换效率,这样就可以一键切换代理。 ??

打开界面我们主要关注Rules菜单项,点击create就可以在规则集合里面书写规则了。

1. host映射和特定子路径的host映射,whistle不仅支持传统的host配置,还支持子路径和端口的host转发配置
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
10.125.36.59 ke.qq.com                      # 直接的host配置
127.0.0.1:8086 ke.qq.com www.qq.com         # 对全部域名路径替换host
10.125.36.59 ke.qq.com/ads                # 对特定的路径替换host
2. 本地文件或文件路径替换,协议头可以加也可以不加,不加表示匹配所有协议,否则只对某个协议生效。类似willow的路径替换。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ctc.i.gtimg.cn/qzone/biz/gdt/atlas/mod/message.html  C:\Users\ouvenzhang\Desktop\edit.html # 单个文件的本地替换
ctc.i.gtimg.cn/qzone/biz/   C:\Users\ouvenzhang\Desktop\biz\build\  # 文件路径的替换,一般用这条就可以了
http://ctc.i.gtimg.cn/qzone/biz/ C:\Users\ouvenzhang\Desktop\biz\build\   #只针对http请求的文件路径替换
3,请求转发,将指定域名请求转发到另一个域名
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
www.qq.com ke.qq.com # 指定域名转发生效
**.qq.com ke.qq.com  # 所有qq.com子域名转发生效
4,脚本注入,可以将一段脚本(可以使html、js、CSS片段)注入到dom页面中进行调试
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ke.qq.com html://E:\xx\test\test.html
ke.qq.com js://C:\Users\ouvenzhang\Desktop\gdt\console.js
ke.qq.com css://E:\xx\test\test.css
5, 匹配模式,可以根据正则式匹配路径
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#/keyword/i #关键字匹配
/ke\.qq\.com\/atlas\/(\d+)\/order\/edit/i C:\Users\ouvenzhang\Desktop\gdt\edit.html  # 正则匹配
ke.qq.com/atlas/25610/order/edit C:\Users\ouvenzhang\Desktop\gdt\edit.html    # 直接匹配
6,忽略特性的请求内容
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/qq.com/ filter://rule|hide    # 忽略包含qq域名下的请求并不在network中显示
/spa\-monitor\.min\.js/i filter://rule  # 忽略匹配包含spa-monitor.min.js,但在network中显示,相当于文件白名单
7,请求改写与接口mock
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ke.qq.com ua://{test_ua}  #注意这里的改写是whistle抓包请求的改写,浏览器调试看到的内容仍然是原来的
ke.qq.com/ec/api.php?mod=utilities&act=estimate tpl://{mock-price}

test_ua和mock-price是values里面的设置,那么对应请求会直接返回values对应的内容,很方便: ??

8, 远程调试,把手机的请求代理到whistle,ip为whistle所在机器的ip,端口号为whistle的监听的端口号(默认为:8899) 配置要注入的请求(系统会自动判断是否为html,如果不是则不会自动注入)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 # xxx为对应的weinre id,主要用于页面分类,默认为anonymous
 www.example.com weinre://xxx
9, 设置https代理

https的内容文档写的比较清楚,设置也很简单,这里就不重复了https://avwo.github.io/whistle/webui/https.html

小结:除此之外,whistle还有更多复杂强大的功能,不过目前我们常用的就上面这些,了解这些就基本满足我们的开发配置了,需要了解更多内容,大家可以进一步查阅具体文档了解。whistle文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
whistle工具全程入门
1前言 在各种网络请求代理工具的一轮尝试过后,决定入坑whistle(由avenwu@tencent开发),发现非常高效易用,解决了困扰多年的问题。     接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求、包装请求、本地调试和移动端代理开发调试等。多多少少,fiddler和Charles使用起来还是有些区别,不过还好都是可视化的界面使用配置起来也都比较方便。     先说下使用体验。对于一个追求高效的开发者来说,总是觉得要经常切换两个
用户1097444
2022/06/29
1.1K0
whistle工具全程入门
替换Fiddler的跨平台调试工具whistlejs试用
本文介绍了一款名为 whistle 的跨平台调试工具,该工具支持 HTTP、HTTPS、Websocket 等协议的调试,并提供了诸如替换资源、修改请求参数、实时过滤和拦截请求等丰富的功能。安装和配置 whistle 非常简单,只需要在命令行中执行 npm i -g whistle 命令即可。在浏览器中,whistle 默认监听 8080 端口,可以通过设置 host 和代理规则实现不同场景的调试需求。总的来说,whistle 是一款功能强大、使用简单的网络调试工具,值得学习和使用。
IMWeb前端团队
2018/01/08
1.9K0
替换Fiddler的跨平台调试工具whistlejs试用
前端应该知道的web调试工具——whistle
第一,whistle 是一个 web 调试代理工具,它的功能十分强大。作为一名前端,我们需要经常跟协议中的应用层打交道,Mock 数据、跨域问题、cookie 的修改、移动端调试等等,都是我们必备的技能,而 whistle 就能解决其中 90% 的问题
GopalFeng
2020/09/24
2.6K0
前端应该知道的web调试工具——whistle
whistle:全新的跨平台web调试工具
avenwu
2016/10/17
5K1
whistle:全新的跨平台web调试工具
前端开发的利器,使用Whistle提升开发幸福感
好多人认为whistle是抓包工具,殊不知抓包只是whistle能力的冰山一角。除了抓包外,它还能修改请求与响应、真机调试h5移动端、解决跨域、域名映射等等等。总而言之,使用whistle能够提升我们的开发效率,改善开发体验。
winty
2024/04/15
4720
前端开发的利器,使用Whistle提升开发幸福感
一款基于中间人攻击用于偷窥HTTPs网站流量的秘密代理工具
我常用的网络分析工具有:Fiddler、Charles 、whistle 、WireShark 和 Tcpdump
快乐咸鱼每一天
2019/10/14
5K0
一款基于中间人攻击用于偷窥HTTPs网站流量的秘密代理工具
whistle手机调试工具使用简单教程
启动之后,输入127.0.0.1:8899 就可以访问到whistle调试界面了:
蓓蕾心晴
2019/08/21
2.2K0
whistle手机调试工具使用简单教程
教你开发whistle插件
IMWeb前端团队
2017/12/28
2.2K0
教你开发whistle插件
8102 年的程序员不需要 Hosts 和 Fiddler
加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色。然鹅,发现下面这两种用法之后,我把自己的膝盖摘下来献给了制作这款工具的大佬。
猫哥学前班
2018/09/11
2K0
8102 年的程序员不需要 Hosts 和 Fiddler
前端开发中使用whistle代理工具
代理工具有很多像‌比较有名的Charles、‌Fiddler,最近发现了一款宝藏代理工具whistle,看到团队中有很多人在用,刚开始还有点不太理解,前端我们一般代理接口解决跨域这些不都是直接在webpack、vite中配置代理规则就行了。
人人都是码农
2025/03/23
1800
前端开发中使用whistle代理工具
跨平台web调试代理工具--whistle
whistle是基于Node实现的跨平台web调试代理工具,支持windows、mac、linux等所有安装了Node的操作系统,可以部署在本地机器、虚拟机或远程服务器,并通过本地网页查看修改HTTP
IMWeb前端团队
2017/12/29
1.1K0
一键轻松设置项目代理「建议收藏」
为了解决这个问题,whistle 1.12 版本带来了新功能,只需一键即可轻松设置项目代理。
全栈程序员站长
2022/07/30
3930
Nginx能为前端开发带来什么?
IMWeb前端团队
2018/01/08
1.2K0
Nginx能为前端开发带来什么?
Vite + whistle:一劳永逸的开发环境代理方案
我们用webpack或vite等工具开发本地项目时,浏览器一般会输入的域名是:127.0.0.1:3000来调试页面。当要请求三方接口时「随便拿个api来举例子」,就会发生下面情况。。。
南山种子外卖跑手
2022/02/22
2.5K1
Vite + whistle:一劳永逸的开发环境代理方案
【抓包工具】whistle入门
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,常用来检验前后端传输数据的情况,常用的抓包工具有Fiddler、Charles、wireshark,不过接下来我要分享是另一个非常易上手的抓包工具----whistle。
用户9913368
2022/08/13
1.7K0
【抓包工具】whistle入门
whistle——基于Node实现的跨平台web调试代理工具
不同于其他抓包工具(通过断点修改请求响应的方式),whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。
毛大姑娘
2020/12/28
1.1K0
前后端联调实践总结
IMWeb前端团队
2017/12/29
2.4K0
【开发体验】前端调试必备-whistle 入门
1.跨域问题。本地联调产生跨域,还得让后台接口origin设置个*,仍然存在一系列问题
神仙朱
2021/08/13
3.1K0
【开发体验】前端调试必备-whistle 入门
nohost — 远程环境配置及抓包调试最佳实践
需求研发,大致分为开发联调、测试、产品体验走查、预发布验证、发布几个步骤。期间我们可能会遇到很多关于调试和测试环境的问题,今天就推荐给大家一个集远程环境配置和抓包调试为一体的最佳实践方案——Nohost。 01 背景 如前言所说,我们需求研发常常遇到下面三个问题: 交接抓包调试的配置不够智能 缺少一个调试和环境配置中心,人人都需要配置一次。每个新同学加入新项目的时候,首先必须要做的事情是知道项目的抓包调试配置是什么,才可能运行和访问调试一个项目。而配置要么看文档,要么导师告诉你。 环境容易冲突 有时候我
用户1097444
2022/06/29
1.2K0
nohost — 远程环境配置及抓包调试最佳实践
whistle - 跨平台的Web代理
whistle(读音[ˈwɪsəl],拼音[wēisǒu])基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用 安装 请先安装nodejs:https://www.runoob.com/nodejs/nodejs-install-setup.html 安装whistle $ npm install cnpm -g --registry=https://re
十毛
2021/02/04
5870
推荐阅读
相关推荐
whistle工具全程入门
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档