QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

  • 2011-08-06
  • 本文字数:1830 字

    阅读完需:约 6 分钟

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

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

关注

评论

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

文心一言 VS 讯飞星火 VS chatgpt (193)-- 算法导论14.3 1题

福大大架构师每日一题

福大大架构师每日一题

《UNIX网络编程 卷2:进程间通信(第2版)》PDF

程序员李木子

容器是怎么一步一步成为云原生的基石技术的

申屠鹏会

云计算 容器 云原生

【YAML语法规范指南】从入门到精通,揭秘神秘语法,引领配置文件解析指南(基础结构篇)

码界西柚

配置 yaml 开发指南 yaml文件 2024年第三十二篇文章

一张“哑火”的AI禁令

脑极体

AI

Java 运算符详解与字符串处理技巧

小万哥

Java 程序人生 编程语言 软件工程 后端开发

雷军不再主讲小米手机发布会;苹果明确:Vision Pro 头显电池某些场景会降低其性能丨 RTE 开发者日报 Vol.142

声网

全网最全的幻兽帕鲁服务器搭建教程—阿里云【保姆级/高性价比】

申公豹

幻兽帕鲁

区块链游戏解说:Axie Infinity 是什么

Footprint Analytics

NFT

利用技术潜能实现企业全面预算管理的智能化转型

智达方通

信息技术 财务分析 全面预算管理 财务规划

提前祝大家新年好!来看看社区 2023 都得了哪些奖吧~

声网

文心一言 VS 讯飞星火 VS chatgpt (194)-- 算法导论14.3 2题

福大大架构师每日一题

福大大架构师每日一题

【踩坑指南】线程池使用不当的五个坑

越长大越悲伤

Java 线程池 踩坑指南

FTP(文件传输协议)客户端 Transmit 5 中文for Mac v5.10.4

Rose

ftp Mac软件 ftp传输 Transmit 5

GraphicConverter 12 mac图片浏览器:编辑、转换和增强图像

Rose

低代码平台四大常见用例开发:简化企业数字化进程

不在线第一只蜗牛

低代码 数字化 项目开发 企业转型

八种常见的云存储安全风险及防护建议

伤感汤姆布利柏

架构实战营模块 8 作业

陈斌

#架构实战营

极狐 GitLab 和 Xcode Cloud 集成,实现 iOS 的自动打包

极狐GitLab

一个线程,从“生”到“死”经历的过程

华为云开发者联盟

Java 线程 开发 华为云 华为云开发者联盟

口袋瑜伽 Pocket Yoga for mac 专业瑜伽课程 打造完美身材

Rose

瑜伽 Mac软件 瑜伽教学 Pocket Yoga

mac电脑好玩的游戏:帕斯卡契约:终极版 游戏模式,体验大升级

Rose

游戏 mac电脑 帕斯卡契约:终极版

唯品会商品详情数据接口Python

tbapi

唯品会商品列表数据接口 唯品会API接口 唯品会商品数据接口 唯品会商品数据采集接口

如何用ETL工具实现API调用

RestCloud

ETL 数据集成 API调用

Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议_Java_Werner Schuster_InfoQ精选文章