iOS Web 开发调试工具 MIHTool 作者访谈

MIHTool 是一款在国外非常出名的移动设备 Web 开发调试工具。大家可能想不到的是这款工具是不折不扣的国人作品。InfoQ 联系到它的作者，做了一次简单采访。不管你是否了解此应用，是否关心移动开发与调试，这后面的故事都值得一读。

以下是采访内容：

InfoQ：请先做个自我介绍吧。

听奏：我是 MIHTool 的作者，也是一个前端开发者，目前就职于网易，专注于移动前端。关于 MIHTool 大家可以 Twitter @unbug 或者微博 @听奏。这是我的个人主页 iunbug.com 。

InfoQ：能否讲讲决定做 MIHTool 这款产品的起因？

听奏：开发 MIHTool 最初是因为移动前端的项目一直受到性能不佳，CSS3 动画不流畅，闪动等的问题的困扰。但如果调试移动端页面的时候能像 PC 端的 Chrome 一样查看到页面合成渲染层边框元素的重绘渲染数，那么可以大大减少上述问题的出现。后来作者在 Zynga 工作室 CTO(也是 jQuery UI 的原作者)Paul Bakaus 指导下，MIHTool 不断迭代，通过 Twitter，邮件，MIHTool Google Group 作者收集到不少网友的建议 (或需求)，MIHTool 才有今天这么多丰富实用的开发者功能。

InfoQ：MIHTool 解决了什么问题？

听奏：详细的内容可以在 MIHTool 的主页看到。当中比较突出的功能用 Paul Bakaus 专门为 MIHTool 写的介绍博文《 MIHTool, the iOS web debugger 》中总结的四点可以说明:

1. Inline Web inspector 这个是 iPad 独占的功能。没错，通过 MIHTool 不仅可以远程调试页面，如果你有一台 iPad 你可以完全用 iPad 来完成调试，特别是你身边没有一台 PC 的时候。当 Paul Bakaus 看到这个功能时他在 Twitter 上是这么评价的"This will be game changing. Nothing like it existed before in iOS. I’m blogging about it."。
2. 进阶性能分析功能显示页面合成渲染层边框和显示元素的重绘渲染数 Webkit 内核的浏览器提供这两个网页高级性能分析标记。在 chrome 中很容易开启，但在 mobile safari 不通过 XCode 的 instruments 是无法查看到的。而通过这两个标记，前端开发者能够更加有依据的也解决性能问题。MIHTool 直接提供了这两个功能，作者希望从事移动前端的开发者通过 MIHTool 都能找出自己作品中的性能瓶颈原因进而做出更加优异的作品。
3. 完全远程控制 通过 MIHTool HTTP Server 你可以完全方便的通过简单的命令控制 MIHTool，这对开发者有什么好处呢？比如你有 10 台 iOS 设备罢在你面前，你想写一个脚本让他们自动打开你的测试页面 (自动化测试)，那么通过 MIHTool 的远程打开 URL 命令你的脚本是可以实现的。
4. 缓存的控制 MIHTool 不仅可以很方便的清除缓存 (包括 manifest)，Cookies，localStorage，你还能 (或者远程) 禁用缓存或者全部删除上述所有数据。这大大的节约了开发者的时间。

InfoQ：市面上有什么同类产品吗?

听奏：目前同类产品比较知名的是 Adobe edge inspect(原名 Adobe shadow)，已经发布有一年了专注于 web inspector 和多平台及云服务。

InfoQ：和 Adobe edge inspec 相比，MIHTool 有什么优势？

听奏：Adobe edge inspect 属 adobe edge 系列的成员，主要功能是 web inspect。MIHTool 专注于给开发者丰富的开发者调试工具，web inspect 只是其中的一个功能，两者都是用的 apache 开源的 weinre，MIHTool 对 weinre 做了一些修改，如适配触屏 (Inline web inspector)，离线存储脚本，支持外连脚本 / 样式的查看等。MIHTool 的开发者工具非常的丰富，其他功能有: 多达 30 的 UA 可以切换，显示合成渲染层边框和元素重绘率，查看 HAR，HTML 编辑器查看和编辑源码，缓存控制，完全化的远程控制等都是 Adobe edge inspect 没有的。并且 MIHTool 只用安装到 iOS 设备上即可以使用，而 adobe edge inspect 要不仅要安装 iOS 客户端，同时还要安装 chrome 插件和 MAC(PC) 客户端，当然，adobe edge inspect 支持多平台也是 MIHTool 不及的。

InfoQ：这款工具的名字是怎么得来的？

听奏：MIH = Make It Happen。这是作者给自己的一个承诺，承诺无论如何都要将 MIHTool 开发出来坚持下去。作者知道无论做任何事情开头难坚持也难，如果不给自己一个承诺那么即使开始兴趣盎然最终也会不了了之。作者为了这个承诺在不到三个月时间就将 MIHTool 打造得如此实用，着实让作者本人也大吃一惊。

InfoQ：在创作这款产品的时候，有没有遇到什么困难，是如何解决的？（语言学习、视觉设计、产品规划、推广工作）

听奏：因为作者曾是 J2EE 开发者，学习其他编程语言心理上没有什么压力，学习 objective-c 时也没有过多拘泥，都是 MIHTool 要用什么特性才通过搜索引擎和 youtobe 视频学习的，显然很不专业，其实 MIHTool 本来是开源的，在 github 上还有早期的版本，但作者把 MIHTool 的 objective-c 代码写得实在不堪入目，不再好意思更新上去。

MIHTool 里唯一上眼的应用图标不是作者设计的，是 Mortensen 的图形与交互设计师 Rude 设计的，Rude 先是在 Twitter 上抱怨原来的图标，后来干脆动手帮作者做了一个，也就是现在 MIHTool 的图标，非常的细腻和精致。

因为 MIHTool 迭代非常的快，规划的功能基本上都即想即加的，直到 5.0 才算基本完善了。但很遗憾的是作者一直想给 MIHTool 加 FPS 查看器和网络环境模拟及类似 fiddler 的本地脚本替换线上脚本等功能因为作者 iOS 开发能力有限没能实现，如果读者知道如何实现欢迎不吝赐教。

MIHTool 在国外较多开发者知晓，Twitter 上几乎每天都有的关于 MIHTool 的新 twitter，但 MIHTool 的推广作者其实没有什么功劳，都是 Zynga 工作室 CTOPaul Bakaus 在 Twitter 上的推广的，他专门为 MIHTool 写了一篇 Blog。同时在 Twitter，G+，facebook 上推广 MIHTool 的还有 Google 的工程师 Paul Irish 和 Addy Osmani 及 Smashing Magazine 的编辑。作者的朋友同事也帮 MIHTool 在微博上推广过，但可能由于国内移动前端不太活跃的原因国内的安装量很少而且大多都是友情支持，目前安装量较多的几个国家是美国，英国，德国，和意大利。

InfoQ：那么国外的开发者对 MIHTool 都有着什么样的评价？

听奏：在 Twitter，一些业界比较有名望的人士对 MIHTool 做出过如下的评价:

• Zynga 工作室 CTO @pbakaus : MIHTool is a brilliant tool that helps you debug websites on iOS.
• Google 工程师 ‏@paul_irish : MIHTool: a smart & powerful debug tool for iOS WebView.
• Google 工程师 @addyosmani : MIHTool will change your life: A complete inline Web Inspector on iOS with performance profiling
• Smashing Magazine ‏ @smashingmag : MIHTool: a good tool for debugging websites on iPad and iPhone.

InfoQ：此款产品在 AppStore 上有一个收费版和一个免费版，能否对此讲讲你的想法？

听奏：收费版是 4。0 才开始上架的，作者对外发布一直没用过收费版的连接，因为收费版是作者给那些想捐助支持 MIHTool 的用户准备的，他们的捐助会帮助作者支付 MIHTool 的服务器开销，作者承诺只要是作者管理的，MIHTool 收费版和免费版就不会有任何区别。

作者收到一些 MIHTool 用户的感谢邮件，希望能通过 PayPal 或 Google Checkout 的方式捐款，作者在此深表感激。

InfoQ：对这款工具，有怎样后续的计划？

听奏：MIHTool 到 5.0 时基本已经完善，目前这段时间作者比较轻松，只修修 BUG 和添加网友新的需求，后续会将 MIHTool 的 HTML 编辑器 (iPad 版) 做成一个更加实用的源码编辑器。

（采访内容完）