whistle使用总结

配套视频入口：传送门

[基础篇]

一、安装

npm install -g whistle

三、手机或电脑配置代理

w2 start
w2 restart
w2 stop

192:~ lujing$ w2 start [i] whistle@2.7.3 started [i] 1. use your
device to visit the following URL list, gets the IP of the URL you can
access:
http://127.0.0.1:8899/
http://192.168.0.102:8899/
Note: If all the above URLs are unable to access, check the firewall settings
For help see https://github.com/avwo/whistle [i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on
IP:8899 [i] 3. use Chrome to visit http://local.whistlejs.com/ to get
started 192:~ lujing$

三、手机或电脑配置代理

四、下载证书，并且信任证书

五、愉快的抓包了

[高级篇]

1、请求转发（替换为本地文件）[不用等后端接口，我们可以使用模拟数据]

http://api/obj/getList file:///Users/lujing/Desktop/test.json

2、请求转发（替换为本地文件）（这个功能很牛逼）

如果线上环境，有特殊问题。没法在生产环境复现，这个时候可以直接替换js文件到本地进行调试，提高调试效率。

https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/components/qrcode-7c53a95a4e.js
file:///Users/lujing/Desktop/test.js

3、请求转发(替换为另一个线上路径)：

这个可以作为跨域的一种解决方案：这里是两种不同的思路：第一种是让whistle帮忙转发
第二种是欺骗浏览器，地址虽然是线上的，但是我请求的是本地的 # http://192.168.0.102:8080/list
http://192.168.0.102:5000/list
https://passport-org.psa-uat.supaur.tech/ http://localhost:8000/

4、注入html、js、css（这个功能很牛逼）

#whistle会自动根据响应内容的类型，判断是否注入相应的文本及如何注入(是否要用标签包裹起来)
#http://www.atguigu.com/ html:///Users/lujing/Desktop/test.html
#http://www.atguigu.com/ js:///Users/lujing/Desktop/test.js
#http://www.atguigu.com/ css:///Users/lujing/Desktop/test.css
###使用value注入
#http://www.atguigu.com/ jsAppend://{test.js}

经典案例：注入vconsole调试 + log查看
（1）第一步：存放资源

（2）第二步：引入资源

（3）结果展示

5、使用 log 功能打印日志（这个功能很好用）

#在移动端真机调试中，我们无法像浏览器控制台那样，查看输出的日志和数据，以往的替代方案是在页面上使用vconsole插件，而有了whistle后，我们可以这样做：
#这时候这个网站（https://www.baidu.com/）的log，就可以在whistle中输出
##千万要注意：这里是https所以https协议也要做代理（这里坑了我半天） https://www.baidu.com/ log://

6、处理跨域问题

这里的服务是nodejs提供的
http://192.168.0.102:5000/list resCors://*

whistle使用总结相关推荐

5分钟教程，手把手带你安装使用抓包神器：Whistle ，内含精选爬虫资料
先来看看Whistle 来到查看抓包请求的页面,可见显示十分的全面还能显示树状图,根据域名进行区分,功能十分强大! 安装步骤 1.安装Node 因为Whistle是基于Node实现的跨平台web调试 ...
Wireshark的https代理抓包(whistle中间人代理)
为什么80%的码农都做不了架构师?>>> 目的查看手机设备上面的请求的,按照SquidMan+Wireshark代理抓包方法抓包之后,发现接口都是https请求的.看了一些资 ...
this.$router.push如何刷新页面_【前端技术】如何优雅的释放F5（基于whistle的livereload）...
插件功能:用于根据指定目录文件变化自动刷新指定页面的 whistle 插件. whistlegithub.com 下文主要介绍livereload原理,直接查看插件安装和使用请看第五步一.需求背景 ...
[TOOLS] 移动端调试进行时 - whistle
1.本地安装.启动whistle 安装实操请查看官方文档不赘述复制代码 2.手机设置代理实操请查看官方文档 !!!注意:代理ip填写whistle右上角online选项中的ip 复制代码 3.wh ...
手把手教你接入前端热门抓包神器 - whistle
大家好,我是若川,今天推荐腾讯前端团队的这篇好文. whistle 是一个基于 Node.js 的跨平台网络调试工具.最近随着 Nohost 的开源,有不少同学问了 whistle 相关的问题,本篇文 ...
利用 whistle 进行混合开发调试
介绍 whistle 是一款用 Node 实现的跨平台的 Web 调试代理工具,支持查看修改 http(s).Websocket 连接的请求和响应内容.简而言之就是 Node 版的 Fiddler.C ...
雷电9模拟器安装抓包工具whistle证书
背景抓某游戏内的包,普通的下载证书,访问会出现白板情况 1.下载whistle证书这里证书选择的是 .pem 格式的, .cer 格式的证书也是可以的,将证书下载到电脑上. 文件名称大概就是 ro ...
解决本地请求跨域问题，替换代理，Whistle + chrome扩展工具SwitchyOmega
一.Whistle 1.安装Whistle Whistle官方文档 npm install -g whistle 2.启动服务 w2 start 3.访问配置页面方式1:域名访问 http://lo ...
WHISTLE特征提取
WHISTLE特征提取论文: 发表期刊:Nucleic Acids Research(JCR-Q1,11.5) 位点预测任务传统的特征:Sequence-derived feature WHISTL ...
Mac下安装whistle
本机安装node.js 官网地址:https://nodejs.org/en/ 1.选择下载LTS版本(该版本可以直接运行安装) 2.双击直接运行下载的包,下一步下一步直到安装结束 3.在终端运行命令 ...

whistle使用总结

[基础篇]

[高级篇]

1、请求转发（替换为本地文件）[不用等后端接口，我们可以使用模拟数据]

2、请求转发（替换为本地文件）（这个功能很牛逼）

3、请求转发(替换为另一个线上路径)：

4、注入html、js、css（这个功能很牛逼）

5、使用 log 功能打印日志（这个功能很好用）

6、处理跨域问题

whistle使用总结相关推荐

最新文章

热门文章