【开发体验】移动端轻松调试 - Whistle

小东西快快学快快记，大知识按计划学，不拖延

本来手机调试是放在 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://vConsole

ok，这样就方便多了

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 倍！主要是不那么烦了

最后

鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵， 如果有任何描述不当的地方，欢迎后台联系本人，领取红包