前端 whistle用法

背景

      很多时候前端需要在手机上调试本机开发环境，大部分的场景可以通过访问本机的ip就可以解决了，但是仍有一些特定的页面需要固定访问的域名，如需要微信授权的页面需要域名，不然得不到授权无法完成接下来的授权操作。

因此，我们需要一个工具可以设置代理，可以用测试环境的域名访问本地环境，从网上找到了这个工具

whistle简介

    基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能

安装

在Windows上安装

打开电脑终端，运行下面命令：

npm install -g whistle

npm install -g whistle

在Mac上安装

打开电脑终端，运行下面命令：

sudo npm install whistle -g

配置代理

pc需要先一个谷歌插件（需要翻墙呦～）

然后打开选项，配置本机127.0.0.1的ip

改完之后一定要记得点击‘应用选项’

启动whistle

之后启动whistle

w2 start

然后随便打开三个网址中的某一个，可以发现这个页面，

配置上你想要映射的域名以及本地的域名和端口就好了

（如果工程中配置了默认的域名如（www.baidu.com）等需要重置为127.0.0.1）

到这个步骤pc的配置就结束了，剩下的就是手机端的配置

以ios为例：

安装证书 

首先 点击下图的https,获取二维码，手机选择同一局域网，扫描后用默认浏览器打开，再到设置文件中信任并安装证书

第二步，点击详情，配置代理

注意： 域名是本机的，但是端口需要用whistle配置的8899端口

保存之后，访问www.baidu.com的网址就会访问到本机的服务。

完毕。。。。。。。

终止whistle

w2 stop