小东西快快学快快记，大知识按计划学，不拖延
本来手机调试是放在 whistle 入门介绍那篇内容的，但是由于那篇篇幅太长，这部分内容又比较独立，所以就单独放一篇来说了
whistle 可以帮助我们更好地调试，当然也包括手机调试
如果没看过 whistle 入门的，可以先去看哈 前端调试必备-whistle 入门
下面就按三个部分写
1、配置手机代理
2、快速注入 vConsole
3、whistle 查看移动端 console 打印
4、whistle 查看移动端 页面信息
本文很简单，前提看过 前端调试必备-whistle 入门
手机配置代理
之前我们whistle 在 PC 端配置了 代理，让浏览器的请求 通过 工具 转发到 whistle，whistle 再转发到 真实服务器。
同样的，如果我们想要抓 手机的包，那么我们也要配置 手机的代理 ，让请求走到 whsitle
1、保证 手机和 PC 在同一局域网
比如连着同一个 wifi
2、查看 PC 的IP 端口
在 whistle 界面快速查看 PC ip 端口
3、手机配置wifi代理到PC 的 IP 端口
点击连接的wifi 配置，下拉到最后，代理改成手动输入 PC 端的 IP 和 端口，然后点击保存即可。
可以在移动端浏览器随便打开个网页看看，请求是否出现在 whistle 的 network 菜单中
注入vConsole
之前手机调试大多数是项目加上一个 vConsole 吧，其实只是开发需要用到的东西，没有必要放在代码里，还很容易带到生产环境
我们现在可以利用 whistle 直接注入
www.test.com localhost:5500 whistle.inspect://vConsoleok，这样就方便多了
whistle 查看移动端 console 输出
我们可以利用 whistle 更加方便在 PC 端查看移动端的 console 输出
PC端 调试 总是 比 移动端要 方便很多
协议是 log ，这么配置
www.test.com localhost:5500 log://写个例子
1、在页面中加入一段打印
2、点击 whistle 界面的 network 菜单，右侧面板的 Tool 菜单
3、移动端访问页面
whistle就会捕获到页面的console
console 区分界面
可以看到，我们配置了 www.test.com 转发到了 localhost:5500，但是一般情况下，某个域名下是会有很多页面的啊
如果所有页面的 console 都输出到一起，就会十分混乱
所以我们可以给 whistle 的 console 输出区分页面这时候我们就需要给 log 协议加上一个 页面别名
现在有两个页面了
然后访问他们之后，我们来验证下
可惜的是，你切换的时候，并不会清空上一个页面的 console，仍然会保留有。这应该是一个 bug
whistle 查看移动端页面信息
如果只是为了查看 log 输出，那么上面已经够用了
但是有时我们还需要查看移动端的其他信息，比如 dom 结构啊，localstorage 的存储啊 之类的
虽然我们可以使用 vConsole 看，但是就是不方便，移动端调试非常地麻烦！！
我们今天可以使用 whistle 的 weinre 协议进行更高级的 移动端调试！
老规矩，配置一个页面为例
www.test.com localhost:5500 weinre://page1协议后面也是 页面的 别名，随便命名
注意！我们一定要先在移动端访问 这个界面，whistle 捕获到之后才能进行调试
1、点击顶部菜单的 Wenire
出现一个菜单，里面有我们配置的 页面别名
2、点击我们Weinre 中 配置的页面，page1
进入到一个新 页面，有各种信息tab，都是有关于这个页面的
如果点击 tab，发现没有内容，就在移动端刷新下页面就好了
是不是很惊喜？移动端调试的麻烦，真是个痛啊
现在我们仅仅利用 whistle 就可以帮助我们在移动端调试 的效率提高 N 倍！主要是不那么烦了
鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵， 如果有任何描述不当的地方，欢迎后台联系本人，领取红包
本文分享自微信公众号 - 神仙朱（skying-zhu）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。