前端代码上线前验证whistle

原创 已于 2023-09-21 09:16:54 修改 · 233 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2023-09-20 18:35:12 首次发布
本文介绍了如何通过全局安装whistle工具，启动代理服务，将线上源代码中的文件替换为本地资源，以便在不发布版本的情况下测试和调试功能。同时提到关闭代理服务以避免影响本地网络的正确使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

通过替换线上源代码 实现上线前功能检验

1. 全局安装whistle

npm install -g whistle

2.启动指令：

w2 start --init
在这里插入图片描述

3.启动后根据地址访问whistle Web控制台 这里是 http://10.73.10.42:8899/

在这里插入图片描述

4.在项目源代码位置 找到需要替换的文件 在whistle web控制台修改为本地文件资源地址在这里插入图片描述

此方法可以在不发版情况下验证即将上线的功能，也可以在不发版情况下debugger 查找线上bug

5.禁用/启用

在这里插入图片描述

6.关闭

  • 停止whistle命令 ： w2 stop
  • 停掉代理: 关闭whistle后需要把浏览器中 右上角-设置-高级-系统-Proxy SwitchyOmega 停用 不然影响本地网络正常使用
14W 行代码量的前端页面长什么样
腾讯技术工程
12-09 1万+
作者：sigmaliu，腾讯文档 AlloyTeam 开发工程师0. 前言腾讯文档列表页在不久前经历了一次完全重构后，首屏速度其实已经是不错。但是我们仍然可以引入 SSR 来进一步加快速...
实现whistle代理避开登录token、cookie实现线上地址运行本地代码
可可爱爱的你吖的博客
05-30 1229
实现whistle代理避开登录token、cookie实现线上地址运行本地代码
Whistle安装与使用
XTY00的博客
04-27 2215
关闭whistle后需要把浏览器中 右上角-设置-高级-系统-Proxy SwitchyOmega 停用 不然影响本地网络正常使用。2、安装whistle : npm install whistle -g 以及配置见下面两篇文章。网上搜索安装教程，但是使用npm安装软件的时候一直报错。3、安装插件SwitchyOmega开启代理。3）选中新增的场景名【whistle】，图3。1）点浏览器右上角【扩展程序图标】，如图1。2）停掉代理，如图3，选中【系统代理】2）点击【甜甜圈】图标，图 2。
Whistle(基于 Node 实现的跨平台抓包调试工具)的使用
2301_76866366的博客
06-11 1261
Whistle(基于 Node 实现的跨平台抓包调试工具)的使用,解决图片跨域,正则匹配,路径匹配,精确匹配,通配匹配,绑定转发,修改请求,修改响应,使用线上域名代替本地开发,whistle向页面注入脚本,whistle实现数据mock功能
whistle 的使用
飞扬_柳絮的专栏
07-04 982
whistle 手机抓包
whistle抓包神器
不负光阴不负自己，不负被爱不负所爱 ​
09-11 1143
打开 Chrome 扩展商店进行安装 https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif。上述命令会先全局安装 Whistle 的 npm 包后，启动 Whistle 并设置系统全局代理，以及安装系统根证书，目前一键安装只支持 Mac & Windows 系统，其它系统按照下面。再重新执行一键安装命令。设置 Whistle 代理。选择 Whistle 代理。
whistle学习笔记二更完整了
weixin_43907110的博客
10-27 797
#安装 npm i -g whistle #运行 w2 start cmd里面w2 start后会出现一串网址，复制到浏览器里面跳转 然后进入rules中 编写要代理的路径即可例如 这样子在地址栏输入百度页面会显示出淘宝当然要记得先安装一个插件叫做SwitchyOmega 安装地址：https://switchyomega.com/download.html 安装之后放入谷歌插件中然后配置的端口就是w2 start的那个，选择https 端口每个电脑不一样根据自己的填写 注意点...
优秀前端人都知道的H5 移动端调试全攻略
zz_jesse的博客
12-28 304
来源：http://jartto.wang/2018/11/01/mobile-debug/作者：jartto随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。一、概要因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。文章会列举目前...
2022年Web前端开发流程和学习路线
萌兔兔MMQ！！
06-20 1314
前端学习
抓包工具之whistle(http、https、socks5)
西京刀客
04-01 1419
[whistle](https://github.com/avwo/whistle)(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的[Fiddler](http://www.telerik.com/fiddler/)，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用
whistle.vase:用于mock数据的whistle插件
05-02
whistle.vase v1.3+ 版本支持通过本地文件加载模板 pattern vase://tpl:AbsoluteLocalFilePath，如：www.test.com/path/to vase://mock:D:\test\demo.json 或 ...
whistle 代理规则管理第三方插件，Whistle chrome 第三方插件
01-01
whistle 代理规则管理第三方插件，Whistle chrome 第三方插件
【高频考点精讲】前端工程师必会的10种代码调试技巧大公开
全栈老李的博客
05-23 863
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。调试是每个前端工程师的必修课，今天全栈老李就来分享10个让你调试效率翻倍的实用技巧。这些方法都是我多年踩坑总结出来的，保证你看完就能用上！
前端工程化：pinia
西岭千秋雪的博客
08-11 422
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
Next.js 国际化：打造多语言应用
zimin的专栏
08-12 731
Next.js 作为一个全栈 React 框架，在构建全球性应用时，国际化（Internationalization, i18n）是不可或缺的功能。国际化允许应用支持多种语言和区域设置，实现语言检测、内容翻译和路由本地化，提升用户体验并扩大受众范围。Next.js 通过灵活的配置和库支持，如 next-i18next 或内置的 i18n 功能，简化了多语言应用的开发。i18n 的核心包括语言检测（根据用户浏览器或首选项自动切换语言）、内容翻译（使用 JSON 文件或第三方服务）和路由本地化（如 /en/
3.4路由守卫
chxii的专栏
08-10 693
在Vue 2中，Vue Router提供了路由守卫（Navigation Guards）的功能，这允许你在路由跳转之前或之后执行逻辑。这些守卫可以用来处理认证、授权、页面标题修改、记录分析数据等任务。
Shape反爬虫技术深度剖析：前端JavaScript混淆与动态签名验证机制
qq_33253945的博客
08-12 333
全面解析Shape反爬虫防护系统的技术架构，深入分析JavaScript虚拟机混淆、动态签名生成和前端加密技术。为Web安全专业人员提供Shape防护机制的完整技术指南和安全研究方向。
day23｜前端学习三件套
universe_01的博客
08-11 501
1、html和css。control shift+k能删掉光标所在那一行。3、找了一个新的html和css。css编写位置：行内样式（内联样式），内部样式，外部样式。基本选择器：通配选择器，元素选择器，类选择器，ID选择器。es6导出数据：分别导出，统一导出export ｛ ｝<ul>unordered list无序列表。<ol>order list 有序列表。使用何种导入方式，要根据导出方式决定。ES6模块化浏览器端应用广泛。inheritance继承。组合选择器，后代选择器。ahchor锚<a>
【web站点安全开发】任务2：HTML5核心特性与元素详解
最新发布
不羁的博客
08-12 514
本文系统梳理了HTML的核心知识点与优化技巧，涵盖四大模块：1. HTML元素：详细解析行内、块级、行内块元素的布局特性与区别，以及替换/非替换元素的本质差异。2. HTML5新特性：重点介绍语义化标签、多媒体支持、增强表单、Canvas绘图、本地存储等核心功能，强调其开发价值与兼容性处理。3. 优化实践：提供图片加载、表单交互、页面性能、可访问性等场景的优化方案，包括懒加载、响应式图片、ARIA属性等实用技巧。4. 高频面试题：精解DOCTYPE、语义化、新特性等常见考点，帮助读者掌握面试应答要点。
whistle
03-20
- **接口测试**: 开发阶段验证 API 接口行为是否符合预期. - **性能分析**: 记录页面加载过程中各个资源耗时情况以便优化建议制定依据 . - **故障排查**: 当生产环境下出现问题但无法重现本地条件下的时候,借助此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值