Opera 蜻蜓（Opera Dragonfly）是 Opera 即将到来的开发者工具的下一步。Opera 蜻蜓是 Opera 浏览器提供的一款跨设备、跨平台的调试环境-调试 JavaScript, 检视编辑 CSS 和 DOM, 以及查看手机上或电脑上出现的错误。第三个Alpha 版本修正了许多 bug, 添加了 DOM 编辑支持， 本地化和优化的 breadcrumb 轨迹。Opera 蜻蜓被集成在 Opera 9.5 及以上版本， 可以通过菜单栏中 工具 → 高级 → 开发者工具 激活。

Opera 蜻蜓特色功能(JavaScript 调试 Debug the DOM 重定义样式 调试手机和电视 Opera 调试菜单 开放自由 永远最新 即将到来)

Opera 蜻蜓的总体架构(架构概览 调试方法 本机 远程 组件 调试主机 Scope 模块 Scope 协议 代理 调试客户端)

Opera 蜻蜓特色功能

JavaScript 调试

Opera 蜻蜓的全功能 JavaScript 调试器使得构建复杂 Ajax 应用前所未有的简单。按行逐步跟您的代码, 随时设置断点。您可以确保掌控写出的应用和脚本如您所愿的运行。

Debug the DOM

如果您使用 DOM 脚本来改变 DOM, 查看源码并不太有用。Opera 蜻蜓使您可以检视更新后的 DOM 及其全部属性。DOM 可以被编辑，直接在浏览器中进行调试试验。

重定义样式

您不仅仅能检视 DOM。看看哪个元素应用了哪些 CSS 规则, 哪些规则是继承的, 哪些是浏览器默认值。被覆盖的规则被高亮标出, 您可以轻易看到哪些样式没有被使用。使用 CSS 编辑功能来调整已有属性和值, 同时附有方便的自动不全功能全面加速并简化您的操作。

调试手机和电视

调试页面, 不管页面是在您本机还是一款支持的设备上, 例如运行 Opera Mobile 9.5 for Windows Mobile 的手机。您可以连接到任何运行 Opera Presto 2.1 及以上版本的设备, 使用电脑的屏幕和键盘调试-不必再痛苦的在手机键盘上麻烦地输入测试数据了。

Opera 调试菜单

下载 Opera 调试菜单以配合 Opera 蜻蜓。这将使打开 Opera 蜻蜓更加方便, 将 Opera 浏览器中网络开发者常用的已有特性集合到了一处。

开放自由

使用您所了解和钟爱的开放网络标准构建, Opera 蜻蜓的源代码开放访问。不仅如此, 它以开源 BSD 许可证发布, 意味着它不仅免费, 而且自由。

永远最新

Opera 蜻蜓是新型的混合应用。一部分是桌面应用, 一部分是网络应用, 它被存储在本地永久性存储器, 同时在新版发布时会立即更新, 正如网站一样。永远不必去检查新版本再下载。

即将到来

第三个 alpha 发布是向 Opera 蜻蜓 1.0 又迈进了一步。再未来的发布中我们会添加更多新功能，如改进的 JavaScript 线程处理, XHR 和 HTTP 监视, 改良键盘导航, 完善用户界面以及桌面版本的整合等。

Opera 蜻蜓的总体架构

架构概览

Opera 蜻蜓（Opera Dragonfly）是 Opera 软件公司提供的开发工具，它的架构使它既可以在平面电脑运行，也可以在手机等移动设备上运行。

一个 Scope 模块将传递出运行时的信息, 比如被调试 Opera 实例中的网页和应用。 这个实例作为调试的主机，为客户端提供信息。主机和客户端之间数据相互传输使用 Scope 协议规范和定义。

为了解决潜在的防火墙问题，一个代理会用来协调处理浏览器和调试器间的信息传递沟通。一个具体的应用实例是使用普通桌面电脑调试一个运行在手机上网页或者应用。而客户端，如调试器，可以将信息视觉化并允许用户操作运行时环境。

主机和客户端可以运行在不同的设备上，而代理可以运行在任何两者中任一实例，也可以在单独服务器运行。

调试方法

主要有两种调试方法：

本机：Scope，代理和调试器运行在同一个 Opera 实例中。

远程：Scope 和调试器运行在两个不同的 Opera 实例上，比如，两个不同的设备上。而代理可以运行在两实例之一，也可以在另外的独立计算机上运行。

本机

这是最常用和最典型的方法。开发者们正在开发网络应用，它可以正常运行于 Opera 浏览器。该调试器运行于相同实例中，显示在一个独立窗口或面板。

在这种情况下，调试主机，代理和客户端运行于同一个浏览器实例。Opera 选择一个随机端口运行代理，Scope 模块和调试器会自动连接它。

远程

这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小，开发也很受限制，因此用桌面电脑来调试是一种方便的做法。

另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera 实例，这在调试实例濒临崩溃的时候非常有用。

远程调试方法可以分解为两种用法：

代理在两实例之一运行。

代理独立于实例运行，比如运行在公共服务器上。第二种方法可以运用在，被调试实例和调试器隔防火墙运行的情况。

组件

此架构由下列组件构成：

运行时

调试主机

Scope 模块

Scope 协议

代理

调试客户端

每个 ECMAScript 环境都是一个单独的运行时。每个 HTML 文档也都关联一个独立的运行时。框架和 iframe 中的文档也有自己的运行时。

调试主机

调试主机可以是任何启用了 Scope 模块并且连接到代理的 Opera 实例。它可能包含多个运行时。

Scope 模块

Scope 模块是 Opera 程序的一部分。一旦启用，模块将向代理 URL 建立一个 socket 连接并检测调试主机上的任何运行时。之后它会将信息发送给调试器。它也会对调试器的特定命令作出响应，比如从选定节点下载 DOM。

Scope 协议

Scope 协议是一套用来在主机和客户端之间交换关于运行时信息的规则和格式。实例包括从运行时得到 DOM 文档结构，或者计算得到的样式集合。

Scope 协议仍在开发之中。一旦完成，它将被完全公开。之后其它厂商或开发者可以创建自己的调试客户端并将它们整合到程序中，如 IDE （例如 Aptana 或 Eclipse）。使用此 scope 协议，此类客户端可以收集到一个 Opera 浏览器的运行时信息。

代理

代理负责在浏览器和调试器之间中转信息。在远程调试方法中它非常重要，即调试主机和客户端不在同一个计算机上。

Opera 运行调试器的实例会提供一个内置的代理，但代理也可以运行在一个公共服务器上。这样，被调试实例和调试器可以均在防火墙之后。

怎样将主机和客户端连接到代理，请参见前面“主机和客户端连接到代理示意图”。

调试客户端

调试器即为客户端，它通过代理连接到调试主机的 scope 模块。它会接收到该实例的运行时信息。调试器将运行时信息可视化，允许用户修改。它通过 Scope 协议向 Scope 模块回送请求以实现其功能。

目前调试器的实现完全基于网络技术：HTML/XML，CSS 以及 JavaScript。