移动端调试杀手锏
今天，哦不，昨天，是让人惊喜的一天。这惊喜当然不是来自于日常工作，而是来自于开源社区。 移动端调试在几年前可能还是前端开发的一个痛点，不过随着开发工具的不断完善以及开源社区的大佬们无私的奉献，这一“难题”也变得不那么难。但是今天偶遇到的解决方案，却可以说是惊艳到我了。
我们为什么需要移动端调试
随着移动浪潮的到来，越来越多的页面需要呈现在用户的手机上，前端的产品形态重心也慢慢从 PC 转向 mobile，就我个人来说，入职一年多，绝大多是都在开发移动端的网页（公司使用 Hybrid 的开发模式）。在开发 PC 页面时，Chrome 和 Firefox 提供了很好的开发者工具（aka：控制台），其中涵盖了一个前端工程师所需要的全部工具，话虽这么说，站在我的角度上来讲，开发一般的页面，Console 和 Network 就足够了。 以上是传统的 PC 页面，概括的来讲，开发之前按下 F12，一切都是那么的自然。 到了移动端，手机上可没有浏览器给你玩，怎么办？ 凉拌。 常规操作，毕竟是在电脑上进行开发，所以通用的解决办法是：
- 打开 Chrome！
- F12！
- Toggle device toolbar！
Chrome浏览器自带了移动设备模拟功能，所以只需点击控制台左上角那个带有手机/pad icon 的图标，即可进入移动设备模式，并且伴有主流设备的选项可供选择，几乎解决了移动端样式调试的需求。 这个方法没毛病，但还是存在一定的局限性：比如无法定位不同设备（真机）由于浏览器内核的不同出现的差异性。再比如，通过 js 调用了一些 native 的接口，是否调用成功以及如果失败了会有什么错误信息？ 在电脑浏览器上模拟设备尺寸的调试并不是真正的移动端调试。 所以，我们需要一个真正意义上的移动端调试的方法，可以脱离电脑的束缚，在移动设备上获得页面的一切信息。
vConsole
秉着 ios/android 无差别共用的精神，这里直接略过了一些只针对单个操作系统的 hack，比如 chrome 的 Remote devices + 数据线的调试方式（既然不是通用方案，我就不关心了）。 理想中的方案就是在需要调试的页面调出控制台。 已经有很多开源项目做到了这件事情，vConsole就是其中之一（微信出品，必属精品）。 通过对浏览器控制台的“模拟”，vConsole 实现了：
- 查看打印日志
- 查看网络请求
- 查看页面元素
- 查看 cookie 和 localStorage
- 在控制台执行 js
- 自定义插件
但是就算有了这样的工具，在开发甚至是上线的过程中，还是会有一些问题无法覆盖到，比如：
- 开发人员鲁莽上线，直接把 vConsole 带到生产环境
- 开发人员再次鲁莽上线，js 运行时错误，影响交互（致命）
AlloyLever
抛了这么多砖（说了这么多废话），终于该引玉了，也就是我在文章一开始说的惊艳到我的东西。 AlloyLever 是鹅厂的 dntzhang 结合了 vConsole 的强大之后开发出的一款堪称大杀器的移动端调试工具。换句话说，真正的调试功能还是借助 vConsole 完成的，但是对使用场景和调用方式进行了拓展：
- 支持错误监控和上报
- 支持预埋机关（DOM/Url）唤起 vConsole
不得不说，高水平的前端工程师是有魔法的。 看了源码之后，发现实现原理并不复杂，而且很像我最近在做一个坑爹需求时的实现方式：异步加载CDN 上的 js。但我却没有更进一步的思考：这种实现方式是否可以继续拓展，得以更好的解决其他类型的问题。 至于预埋机关唤起调试模式，可以说是相当骚了，完美解决了如何在用户侧定位异常的问题，在下五体投地。
最后
在了解了实现机制之后，争取自己实现一遍（立个 flag）：不求源码一致，但求上手顺滑。