- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
whistle工具全程入门
在两个平台上都折腾过，而且要经常切来切去（自己的电脑是windows），后来决定尝试入坑whistle（由avenwu@tencent开发），发现非常高效易用，解决了困扰多年的问题。 whistle文档入口在这里，安装入门使用和原理介绍略过，执行下面命令，然后打开 http://127.0.0.1:8899 就可以了。 使用一键代理切换 安装启动whistle后，通常浏览器需要设置代理指向whistle Server地址127.0.0.1:8899，为了方便切换，chrome下推荐安装使用proxyOmega插件来提高切换效率 8, 远程调试，把手机的请求代理到whistle，ip为whistle所在机器的ip，端口号为whistle的监听的端口号(默认为：8899) 配置要注入的请求(系统会自动判断是否为html，如果不是则不会自动注入 whistle文档
93330发布于 2019-12-03 - 来自专栏Vue源码 & 前端进阶体系
【开发体验】移动端轻松调试 - Whistle
小东西快快学快快记，大知识按计划学，不拖延 本来手机调试是放在 whistle 入门介绍那篇内容的，但是由于那篇篇幅太长，这部分内容又比较独立，所以就单独放一篇来说了 whistle 可以帮助我们更好地调试 ，当然也包括手机调试 如果没看过 whistle 入门的，可以先去看哈 前端调试必备-whistle 入门 下面就按三个部分写 1、配置手机代理 2、快速注入 vConsole 3、whistle 查看移动端 console 打印 4、whistle 查看移动端 页面信息 本文很简单，前提看过 前端调试必备-whistle 入门 手机配置代理 之前我们whistle 在 PC 端配置了 代理，让浏览器的请求 通过 工具 转发到 whistle，whistle 再转发到 真实服务器。 2、点击 whistle 界面的 network 菜单，右侧面板的 Tool 菜单 3、移动端访问页面 whistle就会捕获到页面的console ?
2.6K50发布于 2021-08-13 - 来自专栏IMWeb前端团队
教你开发whistle插件
whistle介绍 whistle是一款用Node实现的跨平台的Web调试代理工具，支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。 github地址：https://github.com/avwo/whistle whistle安装启动 1、安装whistle npm install -g whistle 2、 启动whistle w2 start // 启动whistle w2 restart // 重启whsitle w2 run // 调试模式启动whistle 3、 在浏览器中访问 （1）域名访问 http://local.whistlejs.com/ （2）通过ip+端口来访问，例如： http://127.0.0.1:8899 whistle插件开发 现在想做一个基于whistle的查看请求参数的插件 ，并将参数以表格的形式展示在页面上 插件命名规范 whistle插件本身就是一个普通的Node模块，只是名字要按照whistle.xxx的形式命名，其中xxx指插件的名称且只能包含小写字母、数字、_、-
2.3K01发布于 2017-12-28 - 来自专栏前端小馆
Whistle 开发调试最佳实践
什么是 whistle？ 安装启动 安装 whistle： npm install -g whistle 启动 whistle： w2 start 打开 localhost:8899 就能看到界面了。 500，那么你就可以自己用 whistle 来模拟。 8. nohost nohost 是腾讯开源的一个基于 Whistle 实现的多用户多环境配置及抓包调试系统，个人觉得是 whistle 生态的一个大杀器。 最后 whistle 是一个非常方便开发调试的工具，利用好 whistle 可以发挥你想象不到的作用。
1.9K11编辑于 2022-05-09 - 来自专栏IMWeb前端团队
教你开发whistle插件
whistle介绍 whistle是一款用Node实现的跨平台的Web调试代理工具，支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。 github地址：https://github.com/avwo/whistle whistle安装启动 1、安装whistle npm install -g whistle 2、 启动whistle w2 start // 启动whistle w2 restart // 重启whsitle w2 run // 调试模式启动whistle 3、 在浏览器中访问 （1）域名访问 http://local.whistlejs.com/ （2）通过ip+端口来访问，例如： http://127.0.0.1:8899 whistle插件开发 现在想做一个基于whistle的查看请求参数的插件 ，并将参数以表格的形式展示在页面上 插件命名规范 whistle插件本身就是一个普通的Node模块，只是名字要按照whistle.xxx的形式命名，其中xxx指插件的名称且只能包含小写字母、数字、_、-
2.9K11发布于 2019-12-04 - 来自专栏腾讯IMWeb前端团队
whistle工具全程入门
whistle文档入口（https://avwo.github.io/whistle/install.html）在这里，安装入门使用和原理介绍略过，执行下面命令，然后打开 http://127.0.0.1 使用一键代理切换 安装启动whistle后，通常浏览器需要设置代理指向whistle Server地址127.0.0.1:8899，为了方便切换，chrome下推荐安装使用proxyOmega插件来提高切换效率 ，ip为whistle所在机器的ip，端口号为whistle的监听的端口号(默认为：8899) 配置要注入的请求(系统会自动判断是否为html，如果不是则不会自动注入) 9、设置https代理 https的内容文档写的比较清楚，设置也很简单，这里就不重复了：https://avwo.github.io/whistle/webui/https.html 3小结 除此之外，whistle还有更多复杂强大的功能 whistle文档：https://avwo.github.io/whistle/install.html 扫码下方二维码， 随时关注更多前端干货文章！ ▼ 微信：IMWebTech
1.3K10编辑于 2022-06-29 - 来自专栏IMWeb前端团队
whistle工具全程入门
在两个平台上都折腾过，而且要经常切来切去（自己的电脑是windows），后来决定尝试入坑whistle（由avenwu@tencent开发），发现非常高效易用，解决了困扰多年的问题。 whistle文档入口在这里，安装入门使用和原理介绍略过，执行下面命令，然后打开 http://127.0.0.1:8899 就可以了。 使用一键代理切换 安装启动whistle后，通常浏览器需要设置代理指向whistle Server地址127.0.0.1:8899，为了方便切换，chrome下推荐安装使用proxyOmega插件来提高切换效率 8, 远程调试，把手机的请求代理到whistle，ip为whistle所在机器的ip，端口号为whistle的监听的端口号(默认为：8899) 配置要注入的请求(系统会自动判断是否为html，如果不是则不会自动注入 whistle文档
3.1K60发布于 2017-12-29 - 来自专栏Vue源码 & 前端进阶体系
Whistle 配置 https 抓包
小东西快快学快快记，大知识按计划学，不拖延 whistle 只支持抓http 的请求包，如果要抓 https，需要安装证书，这样才能解开 https 请求包 1、下载 whistle 证书 2、Windows 安装证书 3、Mac 安装证书 4、Android 安装证书 5、iOS 安装证书 1、下载 whistle 证书 打开 whistle 的界面 下载得到这么个东西 2、Windows 安装证书 双击 然后就搞定了 3、Mac 安装证书 以下内容来自百度（https://zhidao.baidu.com/question/1768195217863444340.html） 打开证书管理界面，找到带有 whistle 在同一局域网，并且手机代理到电脑了，你可以直接用手机扫二维码下载证书到手机 不然你就乖乖把证书左导右导过去（qq 或者 微信 传导哈哈哈） 以微信导入为例，直接点击出现这个界面 确认之后，开始安装证书，命名为 whistle 现在你就把证书通过 qq 导入手机了 那么你的操作步骤现在是 打开设置 打开通用 打开描述文件 惊现刚下载好的 不可描述文件 点进去，然后单击右上角安装 输入你的密码，然后安装成功 最后 恭喜恭喜，你终于可以使用 whistle
15.2K30发布于 2021-08-13 - 来自专栏用户1337634的专栏
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://registry.npm.taobao.org $ cnpm install -g whistle 或者直接指定镜像安装 ： $ npm install whistle -g --registry=https://registry.npm.taobao.org 启动 w2 start # 其他常见命令 status/stop Postman设置代理 Chrome浏览器代理设置 一般使用Proxy SwitchyOmega 参考 https://www.bookstack.cn/read/whistle/README.md
81130发布于 2021-02-04 - 来自专栏IMWeb前端团队
利用whistle调试移动端页面
响应状态码、请求(响应)头、请求(响应)内容等等，基本上可以操作web请求的方方面面，而且支持插件扩展功能，本文主要讲下如何用whistle调试移动端页面，安装及使用whistle等其它内容请参见Github ：https://github.com/avwo/whistle。 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台，只需配置简单的whistle规则即可自动捕获页面的错误及console输出的信息，以https://m.baidu.com /为例，由于 https://m.baidu.com/ 是用https访问，先在whistle上开启https拦截，才能对https请求进行抓包及修改，手机需要配置下whistle代理，一切准备就绪后， whistle
1.8K20发布于 2019-12-03 - 来自专栏IMWeb前端团队
利用whistle调试WebSocket和Socket请求
Socket(TCP)请求，需要通过Tunnel代理连接whistle，再通过whistle转发，未避免whistle把普通Socket请求当成https或websocket请求，需要代理请求头添加个字段 x-whistle-policy: tunnel，下面以Node为例说明如何通过whistle转发Socket(TCP)请求(其它语言同理：先发一个http请求给whistle代理把请求信息带给whistle )，要修改WebSocket或Socket的发送或接收数据，需要借助whistle的插件whistle.script，其原理是通过配置whistle规则把请求转发到whistle.script里面的WebSocket 安装whistle.script： npm i -g whistle.script # 或 npm i -g whistle.script --registry=https://registry.npm.taobao.org 相关文章 whistle工具全程入门 利用whistle调试移动端页面 Github地址
5.5K00发布于 2017-12-28 - 来自专栏Vue源码 & 前端进阶体系
【开发体验】前端调试必备-whistle 入门
好的，今天分3部分来说一下 whistle 1、基本原理 2、安装使用 3、基本使用 内容都很简单的 whistle 文档在此，http://wproxy.org/whistle/ 另外，whistle 基本原理 whistle 是一款 代理服务器，让所有请求都先经过 whistle，然后再转发到 真实服务器 所以我们可以在 whistle 拦截到请求的时候，对请求做很多定制化的操作，来模拟各种场景 ? ，whsitle 默认只能抓 http 的请求包，无法抓https ，如果要抓https，需要配置安装证书 Whistle 配置https 抓包 怎么使用 whistle 很强大，功能很多，我不会像翻译文档一样写 光看名字可能不太好理解，意思就是 当有请求经过whistle，whistle 将请求url与pattern匹配，如果匹配到就执行operatorURI对应的操作，转发或者修改请求内容 2左边的 pattern 还有诸如什么 修改 cookie，referer 来规避CSRF 防御 都是可以的 5 请求快捷操作 在 Whistle 界面的 Network 会显示所有经过 whistle 转发的请求，这里主要讲几个功能
3.4K31发布于 2021-08-13 - 来自专栏猪圈子
在线抓包工具Whistle
环境 windows安装 npm install -g whistle mac安装 sudo npm install -g whistle ? 3.检查是否安装成功 whistle help ? 4.whistle启动 启动whistle w2 start 重启whistle w2 restart 停止whistle w2 stop 默认启动端口为 8899 自定义端口 5.whistle访问界面端 http://192.168.6.50:8899 ? 10.Whistle官网: http://wproxy.org/whistle/
5.8K10发布于 2020-12-16 - 来自专栏嘎嘎软件测试
【抓包工具】whistle入门
二 安装whistle 1、前提 安装whistle之前需先安装node，因为whistle是使用node写的。 2、安装 --使用npm安装whistle npm install -g whistle --指定淘宝镜像安装cnpm，也可以使用cnpm安装whistle npm install cnpm -g - -registry=https://registry.npm.taobao.org cnpm install -g whistle 3、启动 --不设置端口默认使用8899 w2 start --指定端口 3、win10设置代理 win左下角搜索代理，代理 > 地址：127.0.0.1或者本机IPv4，端口：8899 4、验证 四 whistle的基本操作 1、过滤请求 在Settings勾选Include 的安装到基本操作，更多whistle教程可查看官网进行解锁：https://wproxy.org/whistle/。
2.5K10编辑于 2022-08-13 - 来自专栏IMWeb前端团队
利用whistle调试WebSocket和Socket请求
Socket(TCP)请求，需要通过Tunnel代理连接whistle，再通过whistle转发，未避免whistle把普通Socket请求当成https或websocket请求，需要代理请求头添加个字段 x-whistle-policy: tunnel，下面以Node为例说明如何通过whistle转发Socket(TCP)请求(其它语言同理：先发一个http请求给whistle代理把请求信息带给whistle )，要修改WebSocket或Socket的发送或接收数据，需要借助whistle的插件whistle.script，其原理是通过配置whistle规则把请求转发到whistle.script里面的WebSocket 安装whistle.script： npm i -g whistle.script # 或 npm i -g whistle.script --registry=https://registry.npm.taobao.org 相关文章 whistle工具全程入门 利用whistle调试移动端页面 Github地址
1.7K21发布于 2019-12-03 - 来自专栏猫哥学前班
使用 Whistle 作为 API 服务网关
今天给大家介绍下，我是如何在这个项目中利用 Whistle 来实现 API 服务网关的（还不知道 Whistle ？看这里）。 [CORS Error] Whistle 提供了 resCors 协议可以很方便的为 response 加上 CORS 相关的 Header（Access-Control-Request-* ）。 同域网关 事实上，Whistle 作为代理网关，可以更加方便的绕过 CORS 策略限制。 我们只需为我们的静态页面和 API 服务设置一个相同的自定义域名，然后全部交给 Whistle 即可。 另外，由于需要在 JS 代码中隐藏 Jira HTTP 鉴权的用户名和密码，我们可以通过 auth 协议将这部分信息配置在 Whistle 网关中。 把 Whistle 作为 API 服务网关，而不需要使用 Node 或 Nginx 服务来转发，是不是既简单又方便？赶紧试试吧：）
3.7K101发布于 2019-09-30 - 来自专栏IMWeb前端团队
利用whistle调试移动端页面
、请求(响应)头、请求(响应)内容等等，基本上可以操作web请求的方方面面，而且支持插件扩展功能，本文主要讲下如何用whistle调试移动端页面，安装及使用whistle等其它内容请参见Github：https ://github.com/avwo/whistle。 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台，只需配置简单的whistle规则即可自动捕获页面的错误及console输出的信息，以https://m.baidu.com /为例，由于 https://m.baidu.com/ 是用https访问，先在whistle上开启https拦截，才能对https请求进行抓包及修改，手机需要配置下whistle代理，一切准备就绪后， whistle，有问题或建议欢迎大家提issue或PR。
3.6K90发布于 2017-12-29 - 来自专栏IMWeb前端团队
跨平台web调试代理工具--whistle
whistle是基于Node实现的跨平台web调试代理工具，支持windows、mac、linux等所有安装了Node的操作系统，可以部署在本地机器、虚拟机或远程服务器，并通过本地网页查看修改HTTP、 whistle把每一类操作对应一个协议，每个修改操作抽象成一个uri，通过简单设置请求url到操作uri的对应关系，实现通过配置操作请求，支持通过扩展协议新增功能；具有配置灵活，功能强大等特点。 配置界面及操作请参考：https://github.com/avwo/whistle/wiki/界面操作 基本功能 基本上通过whistle的配置可以修改请求(响应)的任何信息，主要包含以下功能： 查看请求 域名匹配、路径匹配、正则匹配 三种匹配方式 详细的匹配方式参考：https://github.com/avwo/whistle/wiki/匹配方式 安装使用whistle： 安装whistle：https ://github.com/avwo/whistle 内置功能：https://github.com/avwo/whistle/wiki 界面操作：https://github.com/avwo/whistle
1.2K60发布于 2017-12-29 - 来自专栏前端小叙
whistle手机调试工具使用简单教程
npm全局安装 npm install -g whistle 全局启动 w2 start ? 启动之后，输入127.0.0.1:8899 就可以访问到whistle调试界面了： ? 192.168.5.252:3001/aaa.html log:// weinre://aaa 手机代理设置 1、手机在连着和电脑同一个局域网下，手机进入wifi设置，设置代理为手动，IP地址为电脑IP地址，端口号为whistle 小米手机独特的解决方案，参考此文：https://blog.csdn.net/jinshitou2012/article/details/79044560 页面调试 至此，手机点击请求的页面，whistle
2.5K20发布于 2019-08-21 - 来自专栏大前端全栈开发
前端开发中使用whistle代理工具
代理工具有很多像比较有名的Charles、Fiddler，最近发现了一款宝藏代理工具whistle，看到团队中有很多人在用，刚开始还有点不太理解，前端我们一般代理接口解决跨域这些不都是直接在webpack 直到使用了whistle之后发现真香，提供的功能也比较强大，下面就分享几个在前端开发中实际使用的场景。 注意需要依赖本地node环境，谷歌浏览器中一般会配合SwitchyOmega插件来使用，具体的一些基础配置可以参考whistle官方文档。 接口数据mock开发中如果后端接口还未开发完，往往需要我们自己mock接口数据，利用whistle可以很方便地将项目中某个接口代理到本地的json文件，这样想要什么数据我们直接修改json文件就行了。 不过这个一般测试用得比较多，配置相对复杂一点，具体可以参考whistle官方文档。
58210编辑于 2025-03-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号