1.简介
前端开发调试面临的问题：
- 本地开发时页面地址不能是域名,只能为ip+端口
- 移动端开发中难以查看网络请求
- 移动端开发中难以查看及修改远程页面DOM结构
- 移动端开发中难以查看页面的错误日志
- 线上排错时不能实时的使用本地文件替换线上文件
为此我们需要引入可以提高生产力的工具，今天介绍的Whistle就是为此而诞生的。
whistle（读音[ˈwɪsəl]，拼音[wēisǒu]），基于Node抓包工具，类似于Fiddler,Charles。
2.安装及配置[1]
- 安装node
安装了v0.10.0以上版本的Node
- 安装Whistle
npm install -g whistle
- 启动Whistle
w2 start
- 安装浏览器代理工具
Chrome插件SwitchyOmega
- 手机配置代理
image
- 访问及使用
访问http://127.0.0.1:8899
切换的network即可查询抓包详情
image
- https证书安装[2]
ios需要信任证书
安装好后需要开启https拦截
image
3.解决方案
在介绍Whistle是如何解决前端开发调试的问题之前，我们先普及下Whistle的基础知识。
不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式（即Rules），一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。
针对之前提到的问题，逐个解决。
- 本地开发时页面地址不能是域名,只能为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
打开的页面会被替换为文本中的内容。
