【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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:1513106
用户头像

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

关注

评论

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

【Vue2.x 源码学习】第二十篇 - 使用真实节点替换原始节点

Brave

源码 vue2 6月日更

鸿蒙究竟是什么?

Nydia

架构实战营 模块六作业

Dylan

架构实战营

ES6之set方法

法医

大前端 ES6 6月日更

自然语言处理的发展

Qien Z.

自然语言处理 6月日更

Nginx简单属性和使用总结

赵镇

Cookie常见面试题

悟空聊架构

缓存 面试 Cookie 6月日更

顶级程序员都是如何诞生的?

Nydia

话题讨论

架构实战营模块 6

阿体

不动如山,表备份硬核技术:物理细粒度备份恢复

华为云开发者联盟

集群 数仓 Roach 物理细粒度 备份恢复

架构实战营模块6课后作业

大肚皮狒狒

架構實戰營 - 模塊 6 作業

Frank Yang

架构实战营

Linux之mkdir命令

入门小站

Linux

架构训练营模块6作业

Neil43

架构训练营

模块六 作业

夏日

架构实战营

在线crontab表达式执行时间计算工具

入门小站

工具分享

模块六:课后作业

菲尼克斯

架构实战营

活久见!低访问量竟然也能导致系统问题

三石

mycat

【Flutter 专题】128 图解 ColorTween 颜色补间动画 & ButtonBar 按钮容器

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 6月日更

Python——双向队列 (deque)

在即

6月日更

超详细Redis数据结构底层实现原理介绍

蘑菇睡不着

Java redis

电商系统微服务

贯通

架构实战营

从 Flutter 和前端角度出发,聊聊单线程模型下如何保证 UI 流畅性

魅影

大前端 事件驱动 Event iOS 知识体系

密码学系列之:blowfish对称密钥分组算法

程序那些事

加密解密 密码学 程序那些事 密码学和算法

Redis 五种数据结构以及三种高级数据结构解析

蘑菇睡不着

Java redis

第6模块作业

高亮

架构训练营

架构实战营 模块六课后作业

iProcess

架构实战营

聊聊 Redis 过期键删除策略

蘑菇睡不着

Java redis

聊聊 Redis 内存淘汰策略

蘑菇睡不着

Java redis

电商平台微服务拆分(简化版)

白发青年

架构实战营

Flink集成hive测试及生产规划

一弦思华年

大数据 hive 实时数仓 数仓 flink 执行

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