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

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

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

  1. 第一步,Node.js 环境下全局安装 npm i -g whistle 并启动 whistle w2 start
  2. 第二步,给 Chrome 浏览器装个 SwitchyOmega 的插件,添加一个将所有请求转发到 127.0.0.1:8899 的代理配置。如下图所示(Bypass List 部分也记得清掉)
Chrome 插件 SwitchyOmega

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

1、搭建静态资源 server

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

# 规则:自定义域名或URL<空格>本地目录路径 (以下示例请替换为自己本地的写法)
my.demo/bw/ file:///Users/kaiye/Projects/Demo/002-black-white/

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

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

2、动态 server 转发

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

// webpack.config.js 配置传统手艺
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: ''https://other-server.example.com'',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

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

# 任意域名绑定到本地任意服务
https://my.demo/ 127.0.0.1:8080

# 重写该域名的后端接口路径到线上服务地址
https://my.demo/api/ https://backend.example.com/api/
# 或直接转发到局域网某台机器的具体端口
https://my.demo/api2/ http://127.0.0.1:3000

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

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

如果你有关于环境搭建的问题和建议,欢迎留言交流,也可以关注公众号「猫哥学前班」的「网络编程连载系列」。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

IntelliJ IDEA 2018.3 重大升级(转)

2018.11.28 IntelliJ IDEA 2018.3 正式版发布。对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下。而且 IDEA 今年的第三次...

2892
来自专栏有趣的django

Django用户登录与注册系统

一、创建项目 1.1.创建项目和app django-admin startproject mysite_login python manage.py sta...

1.8K7
来自专栏ionic3+

【Weex一瞥笔记】

安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:

1113
来自专栏java工会

redis面试总结

(1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1)

2384
来自专栏老司机的简书

XCode打framework包、cocoapods库制作及Pods库的二进制切换

近来公司的公共库里有点小问题,但是公共库打成了framework,即使手上有源码也很难调试。网上百度了很多方法,有临时方法,也有比较好的方案,写一篇博客记录下来...

2192
来自专栏bboysoul

在树莓派上搭建使用gitlab

gitlab是一个代码托管平台,因为我的树莓派系统是安装在128G的u盘上的,用来放电影太小,但是空着就是空着了,所以还不如再搭建一个gitlab服务来存放自己...

2352
来自专栏好好学java的技术栈

java工程师必备linux常用命令,这篇文章就够了

bash 是一个为GNU计划编写的Unix shell。它的名字是一系列缩写:Bourne-Again SHell — 这是关于Bourne shell(sh)...

2841
来自专栏北京马哥教育

精通Linux常用的100+命令大全万字详解长文(珍藏版)

运维行业正在变革?推荐阅读:30万年薪Linux运维工程师成长魔法 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、...

55410
来自专栏吴伟祥

Linux 文件与目录管理 转

pwd是Print Working Directory的缩写,也就是显示目前所在目录的命令。

1264
来自专栏IT笔记

使用elasticsearch遇到的一些问题以及解决方法

1.由gc引起节点脱离集群 因为gc时会使jvm停止工作,如果某个节点gc时间过长,master ping3次(zen discovery默认ping失败重试3...

4084

扫码关注云+社区

领取腾讯云代金券