iOSWeb开发调试工具MIHTool作者访谈

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

以下是采访内容&＃xff1a;

InfoQ&＃xff1a;请先做个自我介绍吧。

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;能否讲讲决定做MIHTool这款产品的起因&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;MIHTool解决了什么问题&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

1. \u0026#xD;\n

   Inline Web inspector 这个是iPad独占的功能。没错&＃xff0c;通过MIHTool不仅可以远程调试页面&＃xff0c;如果你有一台iPad你可以完全用iPad来完成调试&＃xff0c;特别是你身边没有一台PC的时候。当Paul Bakaus看到这个功能时他在Twitter上是这么评价的\"This will be game changing. Nothing like it existed before in iOS. I&＃39;m blogging about it.\"。

   \u0026#xD;\n \u0026#xD;\n
2. \u0026#xD;\n

   进阶性能分析功能显示页面合成渲染层边框和显示元素的重绘渲染数 Webkit内核的浏览器提供这两个网页高级性能分析标记。在chrome中很容易开启&＃xff0c;但在mobile safari不通过XCode的instruments是无法查看到的。而通过这两个标记&＃xff0c;前端开发者能够更加有依据的也解决性能问题。MIHTool直接提供了这两个功能&＃xff0c;作者希望从事移动前端的开发者通过MIHTool都能找出自己作品中的性能瓶颈原因进而做出更加优异的作品。

   \u0026#xD;\n \u0026#xD;\n
3. \u0026#xD;\n

   完全远程控制 通过MIHTool HTTP Server你可以完全方便的通过简单的命令控制MIHTool&＃xff0c;这对开发者有什么好处呢&＃xff1f;比如你有10台iOS设备罢在你面前&＃xff0c;你想写一个脚本让他们自动打开你的测试页面(自动化测试)&＃xff0c;那么通过MIHTool的远程打开URL命令你的脚本是可以实现的。

   \u0026#xD;\n \u0026#xD;\n
4. \u0026#xD;\n

   缓存的控制 MIHTool不仅可以很方便的清除缓存(包括manifest)&＃xff0c;COOKIEs&＃xff0c;localStorage&＃xff0c;你还能(或者远程)禁用缓存或者全部删除上述所有数据。这大大的节约了开发者的时间。

   \u0026#xD;\n \u0026#xD;\n

InfoQ&＃xff1a;市面上有什么同类产品吗?

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;和Adobe edge inspec相比&＃xff0c;MIHTool有什么优势&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;这款工具的名字是怎么得来的&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;在创作这款产品的时候&＃xff0c;有没有遇到什么困难&＃xff0c;是如何解决的&＃xff1f;&＃xff08;语言学习、视觉设计、产品规划、推广工作&＃xff09;

\u0026#xD;\n

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

\u0026#xD;\n

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

\u0026#xD;\n

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

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;那么国外的开发者对MIHTool都有着什么样的评价&＃xff1f;

\u0026#xD;\n

听奏&＃xff1a;在Twitter&＃xff0c;一些业界比较有名望的人士对MIHTool做出过如下的评价:

\u0026#xD;\n

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

InfoQ&＃xff1a;此款产品在AppStore上有一个收费版和一个免费版&＃xff0c;能否对此讲讲你的想法&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

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

\u0026#xD;\n

InfoQ&＃xff1a;对这款工具&＃xff0c;有怎样后续的计划&＃xff1f;

\u0026#xD;\n

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

\u0026#xD;\n

&＃xff08;采访内容完&＃xff09;