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

随着智能手机和平板电脑的越来越流行，这对于开发者来说意味着网站需要进行优化，或者适应移动浏览器。但是在移动平台上的调试工具却一直处于功能贫血状态；现代的桌面浏览器装备了功能强大的 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