本文详细解释了 Opera 蜻蜓（Dragonfly）的总体架构，其中各个组件的作用和联系。
架构概览
调试方法
本机
远程
组件
运行时
调试主机
Scope 模块
Scope 协议
代理
调试客户端
架构概览
Opera 蜻蜓（Dragonfly）是 Opera 软件公司提供的开发工具，它的架构使它既可以在平面电脑运行，也可以在手机等移动设备上运行。
一个 Scope 模块将传递出运行时的信息, 比如被调试 Opera 实例中的网页和应用。 这个实例作为调试的主机，为客户端提供信息。主机和客户端之间数据相互传输使用 Scope 协议规范和定义。
为了解决潜在的防火墙问题，一个代理会用来协调处理浏览器和调试器间的信息传递沟通。一个具体的应用实例是使用普通桌面电脑调试一个运行在手机上网页或者应用。
而客户端，如调试器，可以将信息视觉化并允许用户操作运行时环境
主机和客户端可以运行在不同的设备上，而代理可以运行在任何两者中任一实例，也可以在单独服务器运行。
调试方法
主要有两种调试方法：
本机：Scope，代理和调试器运行在同一个 Opera 实例中。
远程：Scope 和调试器运行在两个不同的 Opera 实例上，比如，两个不同的设备上。而代理可以运行在两实例之一，也可以在另外的独立计算机上运行。
本机
这是最常用和最典型的方法。开发者们正在开发网络应用，它可以正常运行于 Opera 浏览器。该调试器运行于相同实例中，显示在一个独立窗口或面板。
网站开发工具Dragonfly简介（图二） src="http://edu.cnzz.cn/newsfile/14000-14999/14920/080603013090071.jpg" width=142 border=0>
远程
这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小，开发也很受限制，因此用桌面电脑来调试是一种方便的做法。
另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera 实例，这在调
试实例濒临崩溃的时候非常有用。
远程调试方法可以分解为两种用法：
代理在两实例之一运行。
代理独立于实例运行，比如运行在公共服务器上。
网站开发工具Dragonfly简介（图三） src="http://edu.cnzz.cn/newsfile/14000-14999/14920/080603013090072.jpg" width=302 border=0>
第二种方法可以运用在，被调试实例和调试器隔防火墙运行的情况。
网站开发工具Dragonfly简介（图四） src="http://edu.cnzz.cn/newsfile/14000-14999/14920/080603013090073.jpg" width=438 border=0>
组件
此架构由下列组件构成：
运行时
调试主机
Scope 模块
Scope 协议
代理
调试客户端
每个 ECMAScript 环境都是一个单独的运行时。每个 HTML 文档也都关联一个独立的运行时。框架和 iframe 中的文档也有自己的运行时。
调试主机
调试主机可以是任何启用了 Scope 模块并且连接到代理的 Opera 实例。它可能包含多个运行时。
Scope 模块
Scope 模块是 Opera 程序的一部分。一旦启用，模块将向代理 URL 建立一个 socket 连接并检测调试主机上的任何运行时。之后它会将信息发送给调试器。它也会对调试器的特定命令作出响应，比如从选定节点下载 DOM。
Scope 协议
Scope 协议是一套用来在主机和客户端之间交换关于运行时信息的规则和格式。实例包括从运行时得到 DOM 文档结构，或者计算得到的样式集合。
Scope 协议仍在开发之中。一旦完成，它将被完全公开。之后其它厂商或开发者可以创建自己的调试客户端并将它们整合到程序中，如 IDE （例如 Aptana 或 Eclipse）。使用此 scope 协议，此类客户端可以收集到一个 Opera 浏览器的运行时信息。
代理
代理负责在浏览器和调试器之间中转信息。在远程调试方法中它非常重要，即调试主机和客户端不在同一个计算机上。
Opera 运行调试器的实例会提供一个内置的代理，但代理也可以运行在一个公共服务器上。这样，被调试实例和调试器可以均在防火墙之后。
怎样将主机和客户端连接到代理，请参见《Opera 蜻蜓简介》。
调试客户端
调试器即为客户端，它通过代理连接到调试主机的 scope 模块。它会接收到该实例的运行时信息。调试器将运行时信息可视化，允许用户修改。它通过 Scope 协议向 Scope 模块回送请求以实现其功能。
目前调试器的实现完全基于网络
技术：HTML/XML，CSS 以及 JavaScript。
网站开发工具Dragonfly简介（图五） src="http://edu.cnzz.cn/newsfile/14000-14999/14920/080603013090074.jpg" width=510 border=0>
点击放大
网站开发工具Dragonfly简介（图六） src="http://edu.cnzz.cn/newsfile/14000-14999/14920/080603013090075.jpg" width=510 border=0>
相关Opera网站开发工具Dragonfly简介