[转]Whistle系列之（五）Whistle移动端调试
总结:Whistle是一个网络抓包工具,移动端调试是一个附加功能,其中自带的weinre是连接手机,类似浏览器开发者工具的界面在电脑上查看,其他的eruda和vConsole是利用Whistle的js注入功能,把这两个工具加到移动端项目,免去直接在项目里写代码,调试完还要移除代码的麻烦,本身的信息查看还是在移动端项目上,点击右下角按钮显示,暂时没找到显示到电脑上的方法,如果大家知道也可以留言分享.
原文地址:Whistle系列之（五）Whistle移动端调试在本地开发中，移动端调试是一个常见的场景。 whistle配置移动端代 - 掘金
在本地开发中，移动端调试是一个常见的场景。
whistle配置移动端代理的整体思路也比较直接，就是将需要调试的移动端设备和开发机连接至同一个网络，然后在移动端设备的网络设置中手动配置代理至开发机上的whisle服务即可。
下面我们演示一下具体的步骤。
准备
- 开启whistle
@GANGDU-MB0 ~ % w2 start
[i] whistle@2.4.15 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
http://127.0.0.1:8899/
http://10.67.149.87:8899/
Note: If all the above URLs are unable to access, check the firewall settings
For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
记住whislte开启服务的ip和端口，在这里是 10.67.149.87:8899，之后的移动端配置中会用到。
- 将需要调试的移动端设备连接至和开发机同一个无线网络。
配置代理
无论是 Ios还是安卓设备，其配置方式都是类似的。
Ios
依次选择 "设置" -> "无线局域网" -> 点击当前连接的网络 -> "配置代理" -> "手动" -> 输入服务器ip和端口（即准备阶段中 获取的ip和端口）
Android
类似地，依次选择 "设置" -> "WLAN" -> 进入当前连接的网络的配置页 -> "代理" -> "手动" -> 输入主机名和端口（即准备阶段中 获取的ip和端口）
效果
假设我们在开发机上开启了一个create-react-app创建的简单项目，并添加了以下规则
qq.ketang.com/ http://127.0.0.1:3000/
则配置了代理的移动端设备就可以通过访问 qq.ketang.com/ 调试开发机上的本地项目，并且可以在开发机的whistle面板进行抓包等其他操作。
更多——eruda/vConsole
经常进行移动端web开发的同学可能对eruda或者vConsole工具不陌生，它们属于同一类工具，即在移动端web上开启一个调试面板，方便开放者直接在移动设备上查看web面板，方便进行调试和定位问题。
当然我们可以在项目中手动引入这些工具，但是whistle通过拓展插件方便地集成了这部分功能，省去了项目中手动引入的麻烦。
1. 下载whistle.inspect插件
w2 i whistle.inspect
在插件面板里可以看到whistle.inspect安装成功并启用
2. 添加配置规则
qq.ketang.com/ http://127.0.0.1:3000/ whistle.inspect://vConsole
# 如果不想使用vConsole而是要使用eruda，可以用下面的规则
# qq.ketang.com/ http://127.0.0.1:3000/ whistle.inspect://eruda
效果
一般来说，eruda/vConsle的功能已经满足移动端调试的基本使用需求，如果想要直接在开发机上查看移动端的console输出，或者有使用weinre等工具等更多的移动端调试需要，可以参考 whistle的作者aven的这一篇文章：
链接：https://juejin.cn/post/6844904167857717262
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
浙公网安备 33010602011771号