BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议

| 作者 Werner Schuster 关注 6 他的粉丝 ,译者 杨晨 关注 0 他的粉丝 发布于 2011年8月7日. 估计阅读时间: 6 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

随着智能手机和平板电脑的越来越流行,这对于开发者来说意味着网站需要进行优化,或者适应移动浏览器。但是在移动平台上的调试工具却一直处于功能贫血状态;现代的桌面浏览器装备了功能强大的JavaScript和DOM调试器,以及性能剖析器。而在移动平台上,调试方法却只能使用alert()弹出对话框或者登录到控制台来查看代码执行的位置以及变量的状态;检查DOM或者CSS的状态是非常困难的,甚至是不可能完成的任务。

有一些工具在弥补浏览器的这些不足,与此同时,浏览器厂商也在改进这种情况,它们在向浏览器中加入调试器以及远程调试支持。

现状:移动调试的变通方案

这些变通方案和未来的移动调试支持有一个共同点:它们是远程工作;调试不会真正发生在移动设备上,而是在其他机器上通过网络连接了一个调试的GUI。

其中一个工具就是Weinre,这个工具是由Patrick Mueller开发,现在已经是PhoneGap项目的一部分了。Weinre的调试功能是使用JavaScript编写,而且必须包含在调试目标的代码中,例如需要调试的HTML页面。Weinre需要一个服务器来连接到调试目标,并且将消息转发给调试器GUI。这个调试器GUI基本上就是一个由HTML和JavaScript编写的WebKit的Web Inspector。

Weinre能够做什么?一旦调试目标连接到调试器GUI,用户可以从终端输出中查看调试目标的代码输出以及在调试目标的环境中对JavaScript代码求值。Weinre同样也支持调试目标的DOM和CSS查看和修改。

有些缺失的功能是需要VM支持,例如设置和捕捉断点以及相关功能,当然还有性能剖析器。

PhoneGap是一个跨平台的架构,它允许应用程序使用HTML/JavaScript作为GUI,并且仍然能够访问本地API。将Web调试变得更加容易是PhoneGap的使命之一,于是,Weinre现在成为了PhoneGap项目的一部分。

JSConsole是一个风格和Weinre类似的工具,它更多地关注于控制台输出和代码求值。在访问JSConsole的网站的时候,用户输入“:listen”来获得带有GUID的一段JavaScript代码。这段代码需要被加入到待调试的网页中。于是,在加载网页的时候,代码将会连接到JSConsole服务器,并且根据GUID将此会话和用户的会话关联起来,于是用户浏览器中的控制台现在便已经处于待调试网页的JavaScript运行时环境中了。

iOS用户安装一些应用来访问JavaScript运行时环境,例如JSConsole app或者Bugaboo

未来:远程调试

这些变通方案允许用户访问移动浏览器中的JavaScript运行时环境来观察和交互 - 只在一定的程度。但是,开发者需要使用桌面浏览器所拥有的强大的调试工具:多种断点(基于行的或者是异常触发,亦或是DOM改变时触发),剖析器等更多功能。

解决方案是将调试功能引入到移动运行时环境中,于是这样就能够通过远程协议进行调试。

Javascript, DOM, CSS, etc, whereas the V8 protocol only supports the Javascript functionality.

WebKit项目近期宣布了支持远程调试,这就意味着可以通过网络协议来访问运行时环境并且调试,并且调试器GUI可以是另外一个进程,或者运行在另外一台机器上。这个功能在一些浏览器和JavaScript引擎上已经有一定程度的支持,因为允许第三方调试器GUI来帮助用户连接到调试环境的调试器是非常重要的。Firefox正在开发CrossFire,这是一个支持调试功能的协议,而且Google的V8引擎也有自己的远程调试协议,这个协议已经被用在一些IDE中,例如Cloud9的Chrome调试器和Node.js工具。不过,我们也要注意到,CrossFire和WebKit的新协议都对Web调试特性提供了广泛的支持。例如JavaScript、DOM和CSS等,但是V8的协议只是支持了JavaScript的调试功能。

一旦移动JavaScript运行时环境和HTML组件支持了这些远程协议,它们的调试能力不会亚于任何一个桌面浏览器。

如果真是如此,将会是什么样呢,我们可以从一些已经支持这些协议的平台上看出一些端倪。一个例子就是Blackberry在Playbook平板电脑上的远程调试支持,它包含了WebKit中最新的WebInspector和远程调试特性。

Opera的移动浏览器也通过DragonFly调试器来支持远程调试。我们需要注意,Opera Mobile是一个功能齐备的浏览器,而Opera Mini只是简单地展示在服务器已经渲染好的HTML文件以及中转用户事件。

仍然值得期待的是,Android和iOS上的浏览器在什么时候会跟进并且支持远程调试。

你是否在使用我们没有提及过的调试工具呢?

查看英文原文:Debugging Mobile Web Apps: Weinre and JSConsole Now, Remote WebKit Eventually

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT