GMTC全球大前端技术大会(北京站)门票9折特惠截至本周五,点击立减¥480 了解详情
写点什么

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

2011 年 8 月 06 日

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

2011 年 8 月 06 日 17:1512541
用户头像

发布了 90 篇内容, 共 28.5 次阅读, 收获喜欢 1 次。

关注

评论

发布
暂无评论
发现更多内容

常年“佛系”Crysis勒索病毒突然变种 变身黑客工具合辑

360安全卫士

Facebook 起诉水军公司:删不过来,我还告不过来吗?

神经星星

facebook 亚马逊云 AWS Lightsail 水军 虚假评论

Free space——区块链加密社交平台新秀之作

Geek_116789

重学 Java 设计模式:实战责任链模式「模拟618电商大促期间,项目上线流程多级负责人审批场景」

小傅哥

设计模式 小傅哥 重构 代码优化 责任链模式

如何写出高质量的代码?(浅谈代码规范、重构、单元测试的重要性)

Nick

单元测试 重构 代码重构 代码规范

第三周作业

LEAF

你真的了解敏捷吗?听马丁福勒聊敏捷

涛哥

敏捷 数字化转型

架构师训练营第二周课后作业

赵凯

框架设计

互联网人的娱乐精神之28岁退休 & P8和生活助理的故事

码农神说

程序员 漫画 退休

架构师训练营作业 (第三周)

王海

极客大学架构师训练营

还在埋头干活?给程序员的几个忠告

四猿外

Java 深度思考 程序员 随笔杂谈 程序员成长

培训机构出来的程序员常被鄙视,招谁惹谁了

程序员生活志

程序员 程序人生

架构师训练营-week01 学习总结

GunShotPanda

运营系统架构文档

师哥

思想不进化的人都是可怜人

Neco.W

提升认知 思考 进步 进化

英特尔宋继强:坚持科研的长期主义 推动AI向3.0时代跃迁

最新动态

数据库如何弹性伸缩?

Aaron_涛

数据库 架构 云原生

小师妹学JVM之:JIT中的LogCompilation

程序那些事

JVM 「Java 25周年」 小师妹 性能调优 JIT

加密与解密

返町

一种极致性能的缓冲队列

捉虫大师

Java 性能

Android APP启动白屏优化

小菜鸟学php

android白屏

当你输入get/set命令的时候,Redis做了什么

老胡爱分享

redis 源码分析

对不起,我爱你

小天同学

小说 爱情 情感

【写作群星榜】6.12~6.19 写作平台优秀作者 & 文章排名

InfoQ写作平台官方

写作平台 排行榜

Zoom 妥协!对免费用户开放端到端加密服务

神经星星

音视频 Zoom 端到端加密 隐私保护 数据保护

GitHub 热榜:一款堪称作业终结者的开源神器!

JackTian

GitHub 开源项目 工具类网站 学生党 Text-to-handwriting

flutter开发

InfoQ_1c4a1f813eb1

如何让企业的IT数据运维更有“烟火气”?

博睿数据

数据挖掘 学习 数据中台 运维 大屏可视化

为什么Web开发人员在2020年不用最新的CSS功能

Geek_Willie

CSS

必知必会,程序员都应该会的Linux的50个知识点!

Java小咖秀

Linux 面试 运维 Shell 经验

跨云厂商部署 k3s 集群

米开朗基杨

k3s wireguard

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