8102 年的程序员不需要 Hosts和Fiddler

加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色。然鹅,发现下面这两种用法之后,我把自己的膝盖摘下来献给了制作这款工具的大佬。

如果你还没用过 whistle,没关系。只需两步:

第一步,Node.js 环境下全局安装 并启动 whistle

第二步,给 Chrome 浏览器装个 SwitchyOmega 的插件,添加一个将所有请求转发到 127.0.0.1:8899 的代理配置。如下图所示(Bypass List 部分也记得清掉)

环境准备好之后,我们开始进入今天的姿势,看 whistle 是如何取代本地 hosts 和 web server 的。

1、搭建静态资源 server

打开 whistle 管理后台 http://127.0.0.1:8899 ,在左侧导航的 Rules 面板写入一条规则:

再用浏览器打开 http://my.demo/bw/ 的网址。Bingo!一个自定义域名的静态资源服务器搭建成功!

是不是比 nginx 配置简单一丢丢?如果安装了 whistle 的证书,还能直接支持 HTTPS!

2、动态 server 转发

如果我们把上例中的本地路径替换成一个本地服务端口,例如 webpack devServer 的端口。那么就可以实现本地带端口号的 host 配置功能,同时还能告别复杂的 devServer/nginx rewrite 配置:

假设本地 webpack 服务端口号为 8080,whistle 的配置规则示例如下:

接下来就可以打开 https://my.demo/ 像调试线上环境一样开发本地环境了。你还可以将 whistle 部署到局域网服务器,用来搭建一个多人协作的测试环境(也就是 nohost 解决方案)。

whistle 是一款免费且强大的抓包工具,除了本文提到的静态 server 和服务转发功能以外,还提供了大量内置协议用于支持 request/respond 动态修改与注入、websocket 调试、API mock 等功能,借助 whistle plugin 插件生态,不仅能获得极佳的移动端调试体验,还能满足各式各样的调试需求。更多 whistle 介绍,请访问 whistle 官网。

如果你有关于环境搭建的问题和建议,欢迎留言交流。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180910G22Q8B00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券