0%

Whistle使用

前端开发调试测试时,我们team都会使用到whistle,这样可以将部分资源代理走既定地址。

whistle安装

关于whistle安装使用,这里总结下

  1. 安装NodeJS

    https://nodejs.org/en/download/

  2. 安装whistle

    1
    npm install -g whistle
  3. 启动whistle

    1
    2
    3
    4
    5
    # 终端下执行以下命令
    w2 start

    # 确认启动状态
    w2 status
  4. 浏览器访问http://127.0.0.1:8899

  5. HTTPS拦截

    为了正常代理HTTPS的URL,需要开启HTTPS

    • 打开HTTPS相关开关
    • 下载根证书,安装并信任
    https://static.1991421.cn/2022/2022-06-28-175913.jpeg

https://static.1991421.cn/2022/2022-06-28-180151.jpeg

  1. 安装Whistle Chrome插件

    • 为了解决浏览器中网页请求都走whistle代理,需要对应安装插件支持,注意需要启用whistle代理

    • 浏览器对应商店如果没有该插件,可以使用SwitchyOmega

  2. 验证代理成功

    验证方式很多,比如访问流氓百度,查看站点证书变成了whistle即OK,也可查看whistle network是否有对应记录即可

如上几步操作后即可正常使用whistle来代理浏览器中的所有网络请求。

关于whistle Chrome插件

whistle只是个代理服务,本身并不默认接管系统或者部分应用代理,因此可以灵活搭配使用。 之前总结过一篇文章Surge结合Whistle使用,但Surge本身使用存在门槛儿问题。因此如果只是网页代理,使用该插件即可。如果想让其它服务比如终端等走whistle代理,需要其它配置了,比如Shell中直接配置代理等。

一些配置技巧

修改请求UA头部

规则增加

1
https://1991421.cn ua://{browser_ie10_ua}

values中配置browser_ie10_ua

1
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E)

修改window.navigator.userAgent

有些逻辑比如兼容性提示页面可以通过程序化修改UA信息来一定程度模拟IE访问

规则增加

1
https://1991421.cn jsPrepend://{ie11_js_ua}

values中配置ie11_js_ua

1
2
3
window.navigator.__defineGetter__('userAgent', function(){
return "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0; rv:11.0) like Gecko"; // customized user agent
});