移动端调试工具 Mobile Console 介绍

移动 Web 发展至今，手机浏览器却一直没有一个原生的 devTool 供我们开发者使用。虽然已经出现了很多与桌面联调的优秀方案，但面对突发的线上问题需要快速定位时，手机屏幕前的你是不是也显得手足无措？如果能够仅仅依靠 Web 页面中预设的一个控制台检查问题，那将是我们都希望拥有的美好明天。

关于开发一款移动端调试工具的想法其实由来已久，从很久以前在页面上打印 window.onerror 时就开始有这个想法了。而最终促成 Mobile Console 诞生的机缘则是发现了 AlloyLever 项目。

不得不说 AlloyLever 项目让我眼前一亮，我发现这正是我寻求已久的一款漂亮的可视化工具。但是当我使用后，发现它所提供的功能和我的需求还是有些出入的。

开发缘由

首先让我们一起理解为何需要开发如此一款由 JS 构建的调试工具。

相信大家都有了解如何在桌面调试移动端网页的经验。比如使用 chrome://inspect/#devices 或者使用 chrome 下的 Inspect Device 插件都可以很好的调试我们的页面，功能绝对比我们自己用 JS 构建的调试面板强大。但是桌面的联调是需要前提的，首先你得有个安装了 chrome 浏览器的电脑，如果是使用 IDE 调试，则还需要安装 IDE 所需环境。

这些调试的代价在办公室时是微乎其微的，但是在出办公室后，在没有随身携带电脑的情况下，你该怎么办？

Mobile Console 就是为此诞生的，即提供一款能够快速定位问题、代价极小的调试工具。

Mobile Console 的特点

无依赖

Mobile Console 仅仅使用了一些基本的 ECMAScript 5 中的 API，对第三方工具没有任何依赖，可以安心在移动端页面使用。

灵活的面板功能

Mobile Console 仅提供两个最基本的面板，其他的面板都需要开发者自己量身定制。为什么如此设计？

因为我觉得快速定位问题，很大程度上是基于经验。即仅仅提供最基础的功能就好。

默认面板

错误提示是调试过程中所需要的最基本信息，所以这个功能被放入了默认面板中。

cookie、本地存储很可能是网页调试过程中需要反复操作的内容，比如调试登录问题。所以它们也被放入了默认面板中。

HTML 面板

查看 HTML 结构对于 bug 调试有时也是一种行之有效的方式，所以在 demo 页面中有提供给大家一个简易的 HTML 结构面板。

由于移动端 HTML 结构大多数情况下并不是由后端模板编译而成，而是纯粹的静态文件，因此 Dom 结构不会随数据接口的异常产生问题。所以最终 HTML 面板没有被加入默认面板中。

调试功能之外

除了快速定位 bug，自定义面板也可以添加一些功能、性能相关的面板。比如将网页中需要使用的 API 整理成按钮，固定在自定义面板中，或者是将 Timing API 数据展示在面板中。不过这些功能可能在桌面联调过程中由桌面浏览器的开发者工具完成会比在小小的手机屏幕上完成更简单方便。

在自定义面板中实现自动化测试的 case，甩开 PhantomJs 等也不是不可能。有了自定义面板，Mobile Console 的可能性确实大增了。

qq 20160529200704

DEMO 页中的 HTML 面板

总结

Mobile Console 是为了快速定位问题而生，它有自己擅长的部分，将不擅长的部分尽可能的交给其他工具完成。当然，只要你需要，Mobile Console 也乐意实现开发者指定的任何功能。

YIXUNFE / blog