Whistle

Whistle他是一个基于node.js的网络调试工具

基础篇

一.安装

npm i -g whistle   //下载whistle
npm i -g whistle && w2 start --init   //下载whistle并初始化whistle

二.启动/停止/重启

w2 start      启动
w2 restart    重启
w2 stop       停止
w2 add        添加规则

三.手机或电脑配置代理

网络 > 代理 > 使用服务器代理

四.安装浏览器插件 Proxy SwitchyOmega

https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif
无法下载可使用链接: https://pan.baidu.com/s/1f5RH-lo2Xk7fkcpEI4hXpg 提取码: yjjq

二.高级

1.请求转发(解决数据模拟)

将请求的数据替换为本地文件，也就是说，你请求的那个网站，他不会跳转到那个网址，而是会转到你本地的文件中，去读取你的数据
就是我们一开始写项目时，后端不能立即把接口写出来，而只是给我们数据结构，因此我们的只能使用mock.js插件去模拟数据，而有了whistle。
我们则无需等待数据。自己写点数据，并发送请求

后端接口(不是随便写的接口，是后台给我们的)   本地文件
https://api/getList                     file://user/Desktop/test.json

如果浏览器是在访问https://api/getList这个链接，就让他转移到file://user/Desktop/test.json去读取数据

2.请求转发(解决线下调试线上)

这个就是你的项目上线了，但是你的某个文件出现了问题，然而你知道是哪个文件出现了问题，但是你只能操作开发环境的代码，但是你开发环境的代码改好了，线上仍然会有问题，此时，whistle它出现了。

线上某个项目的路径         本地代码路径
https://api/getList.js   file://user/Desktop/getList.js

此时，你就能通过网址访问线上是，你的线上https://api/getList.js这个文件，会接入到本地项目的file://user/Desktop/getList.js文件，你改变本地的这个文件，你线上的文件也会改变。从而达到线下文件调试线上项目环境。通过debugger调试

3.请求转发(解决跨域)

就是我随便请求一个网址，他会自动的帮我们请求到配置的网址

我的网址                    后端提供的接口
http:localhost:8000/list   https://hhh/list

本地是不是localhost:8000？我访问http:localhost:8000/list 是不是不会跨域，而我再配置，让访问http:localhost:8000/list 时，自动访问https://hhh/list，是不是就不会有跨越问题了

4.注入html，css，js

注入css，在Rules配置中配置

百度网址        本地css文件
www.baidu.com  css://user/list.css

将本地文件注入进去，从而改变百度文字颜色

注入js，在Values配置中配置
1.创建两个Values，第一个存储js源码，第二个则是实例化

2.在Rules配置

你需要引入的网址    引入的js文件
www.baidu.com      jsPrepend://{第一个存储源码的名字}  //引入源码
www.baidu.com      jsPrepend://{第二个存储源码的名字}  //引入实例
www.baidu.com      log://                            //在whistle中也打印log

注意：插件vConsole

5.使用log功能打印日志

移动端无法使用浏览器调试台，whistle解决了这个问题

指定对应的网址
www.baidu.com      log://                            //在whistle中也打印log

6.解决跨域

方法1：

需要跨域的网址    解决跨域的属性
http://user/list resCors://*

方法2：

自己的ip与端口                需要跨域的网址
http://localhost:8080/list   http://user/list

注意：
1.图片跨域devserver无法解决
2.devserver解决跨域，并且改配置文件，需要重新启动
3.如果需求切换用户，则需要修改cookie然后重新启动webpack，等待时间长
4.如果将代理由开发环境切为线上环境（如定位线上bug），又需要改proxy，还要修改cookie
5.当在微前端场景跳转时页面会白，如ke.qq.com对应项目A，ke.qq.com/course/ 对应项目B,此时跳转后，本地没有启动B项目，页面会空白

ignore//* 是一种规则配置，用于忽略特定的请求或响应。

1.设置静态文件转发, heimahr.itheima.net localhost:9528 ，检查项目是否转发成功
2.去掉项目代理，即webpack的proxy
3.设置接口忽略规则 heimahr.itheima.net/api/ ignore://*
4.发现图片无法显示，设置图片显示规则
5.热更新失效，给devserver加disableHostCheck: true
6.填写readme

队友如何使用？

1.创建一个配置项级别文件 .whistle.js

export.name = 'xx开发环境'
export.rules = `
后端接口地址   本地端口地址
后端接口地址/api  ignore://*   忽略掉后缀为api的路径，因为本地没有api路径
`

2.w2 add