前端测试工具 SwitchHosts + Charles + Proxy SwitchyOmega

在进行前端测试时，我们首先要进行环境配置，即修改 host（配置IP域名）。

配置 host 方式：

  1. /etc/hosts
  2. 用Linux命令vim编辑
  3. SwitchHosts工具编辑（可下载下来方便快速编辑host）

hosts 文件是用于本地 dns 服务的，采用 ip 域名的格式写在一个文本文件当中，Hosts 是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统再会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。

SwitchHosts

官网地址：https://swh.app/

charles 服务器返回_charles 服务器返回


SwitchHosts是一个管理、快速切换Hosts小工具，开源软件，一键切换Hosts配置，非常实用，高效。

我们在开发Web项目过程中，一般会部署有多套环境，网址域名都相同，部署在不同的服务器上，有开发环境、测试环境、预发布环境、生产环境。经常要切换Hosts来访问，测试以及验证bug，如果纯手工修改这会花掉不少时间。

在使用 SwitchHosts 切换 host 时，需要以管理员身份运行。

新建分组，一般是正式环境一组，测试环境一组，本地开发一组：

charles 服务器返回_前端_02


保存后记得打开该分组。

Charles

Charles其实是一款代理服务器，通过过将自己设置成系统（电脑或者浏览器）的网络访问代理服务器，然后截取请求和请求结果达到分析抓包的目的。该软件是用Java写的，能够在Windows，Mac，Linux上使用。安装Charles的时候要先装好Java环境。

Charles 破解方法

破解地址：https://www.zzzmode.com/mytools/charles/

生成注册码，打开 Charles 输入注册码即可。

charles 服务器返回_proxy_03

Charles 配置
  1. 在 Charles 的菜单栏上选择 “Help”->“SSL Proxying”->“Install Charles Root Certificact”
  2. 选择当前用户，将所有的证书都放入受信任的根证书颁发机构，安装 CA 证书
  3. SSL代理设置：选择 Proxy | SSL Proxy Settings，弹出 proxy 设置选项卡，勾选 Enable SSL Proxying，在 Location 部份选择 add，按如下图添加，抓取任意站点、443端口的数据。
  4. 配置 Tools | Map Remote Settings：将左侧虚拟访问地址指向右侧本机端口（已经过SwitchHosts切换，https://me-test.xxx.com 代表本机环回地址127.0.0.1）

Proxy SwitchyOmega

Proxy SwitchyOmega 是一款非常优秀的浏览器插件，适用于 Chrome 和 Firefox，它可以轻松快捷地管理和切换 IP 代理，可以通过 Chrome 应用商店安装。

charles 服务器返回_服务器_04


安装完成后，将管理工具固定在浏览器地址栏的右侧，以方便后续使用，并默认设置为系统代理。如下图所示：

charles 服务器返回_运维_05