Whistle使用简介

---

1.简介

前端开发调试面临的问题：

• 本地开发时页面地址不能是域名,只能为ip+端口
• 移动端开发中难以查看网络请求
• 移动端开发中难以查看及修改远程页面DOM结构
• 移动端开发中难以查看页面的错误日志
• 线上排错时不能实时的使用本地文件替换线上文件

为此我们需要引入可以提高生产力的工具，今天介绍的Whistle就是为此而诞生的。
whistle（读音[ˈwɪsəl]，拼音[wēisǒu]），基于Node抓包工具，类似于Fiddler,Charles。

2.安装及配置^[1]

1. 安装node

安装了v0.10.0以上版本的Node

2. 安装Whistle

npm install -g whistle

3. 启动Whistle

w2 start

4. 安装浏览器代理工具

Chrome插件SwitchyOmega

5. 手机配置代理

image

6. 访问及使用

访问http://127.0.0.1:8899
切换的network即可查询抓包详情

image

7. https证书安装^[2]

ios需要信任证书
安装好后需要开启https拦截

image

3.解决方案

在介绍Whistle是如何解决前端开发调试的问题之前，我们先普及下Whistle的基础知识。
不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式（即Rules），一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。

image

针对之前提到的问题，逐个解决。

• 本地开发时页面地址不能是域名,只能为ip+端口

Rules中添加：
127.0.0.1:8080 xxx.xxx.com
在浏览器中访问xxx.xxx.com即可自动转发到本地服务中
注：使用此方法也可以方便的更换域名host。

• 移动端开发中难以查看网络请求

切换到network界面，可以直接查看所有经过代理的网络请求
同时使用Composer可以方便的对请求重放。

image

• 移动端开发中难以查看及修改远程页面DOM结构

Rules中添加：
xxx.xxx.com weinre://test
访问后可以实时查看及修改网页结构、Storge、Network

image

更多移动端调试方法可以参考： 利用whistle调试移动端页面

• 移动端开发中难以查看页面的错误日志

Rules中添加：
xxx.xxx.com log://
即可实时查看console中输出的日志。

• 线上排错时不能实时的使用本地文件替换线上文件

Rules中添加（示例）：
https://xxx.xxx.com/app.html file:///home/oracle/init.html
打开的页面会被替换为文本中的内容。

4.参考链接:

• 快速上手指南

• whistle工具全程入门

• GitHub地址

---

1. 软件安装教程 ↩

2. https证书安装教程 ↩