Opera Dragonfly是Opera中的网页开发者工具,类似于Firefox中的Firebug、IE下的IE WebDeveloper,Opera Dragonfly 是适用于 Opera 浏览器的跨设备、跨平台的调试环境 - 调试 JavaScript、检查和编辑 CSS 与 DOM,以及查看手机或计算机上的任何错误。
可以从“菜单”->“网页”->“开发者工具”->“Opera Dragonfly”将其激活,也可右键选择“检查元素”将其激活。
从“菜单”->“网页”->“开发者工具”->“Opera Dragonfly”可以将其关闭, 或使用Ctrl+Shift+I快捷键关闭Opera Dragonfly检查元素窗口。
Opera Dragonfly默认是在线版的,但可以安装使用离线版,从而能离线检查元素。
1. 在本页下载Opera Dragonfly源码压缩包,Opera-Dragonfly.zip。
2. 解压到D:盘。
3. 在Opera地址栏输入opera:config打开首选项编辑器,将Developer Tools下的Developer Tools URL由改为file://localhost/D:/Opera-Dragonfly/client-en.xml,“保存”即可。
如果想恢复使用在线版,可点击Developer Tools URL后的“默认”按钮,从而恢复回默认值https://dragonfly.opera.com/app/
Opera Dragonfly在线版是可以自动更新,无需自己手动更新,但由于访问网络上的的文件,所以加载速度较慢,离线版需要自己手动下载更新安装新版本,但由于访问的是本地文件,所以加载速度较快。
主要有两种调试方法:
本机:Scope,代理和调试器运行在同一个 Opera 实例中。
远程:Scope 和调试器运行在两个不同的 Opera 实例上,比如,两个不同的设备上。而代理可以运行在两实例之一,也可以在另外的独立计算机上运行。
本机
这是最常用和最典型的方法。开发者们正在开发网络应用,它可以正常运行于 Opera 浏览器。该调试器运行于相同实例中,显示在一个独立窗口或面板。
在这种情况下,调试主机,代理和客户端运行于同一个浏览器实例。Opera 选择一个随机端口运行代理,Scope 模块和调试器会自动连接它。
远程
这个方法的一种应用是可以调试手机上的网页或应用。手机一般屏幕很小,开发也很受限制,因此用桌面电脑来调试是一种方便的做法。
另一种可能性是在同一个设备上的一个 Opera 实例调试另一个 Opera 实例,这在调试实例濒临崩溃的时候非常有用。
远程调试方法可以分解为两种用法:
代理在两实例之一运行。
代理独立于实例运行,比如运行在公共服务器上。
第二种方法可以运用在,被调试实例和调试器隔防火墙运行的情况。
Opera Dragonfly 1.1在经过6个 RC 版本后,修复了大概 200 个 bug,终于发布了正式版。除了修 bug,当然有不少改进。
Opera Dragonfly 1.1,相较于 1.0 的改进和新增功能如下:
DOM 和样式查看器
查找功能支持通过正则表达式、CSS 选择器、XPath 和普通文本匹配实现
CSS 查看器中增加链接,可以追溯到定义该 CSS 声明的源文件
可显示对伪类和伪元素的声明
可显示 SVG 表现属性
Javascript 调试器
查找功能改进:支持正则表达式;可选择是否忽略大小写;在所有 JS 中查找时可选择是否忽略注入式 JS(Opera本身的 Browser.js 、User JS 、扩展 JS)
存储查看器
改进本地存储、进程存储和 Widget 首选项查看器的用户介面,和 1.0 版本的 Cookie 查看器介面风格协调一致。
控制台
为本地对象新增自动完成功能
内置的可扩展对象
控制台高亮显示警告、信息、错误
错误日志
重新设计了用户介面,比原有设计更节约屏幕面积
错误按资源类型分类显示,不再使用以往的按严重级别分类的显示方式
每行错误后面增加了连接,能追溯对应代码的行号
“查找”更名为“过滤器”(…..= =||
移除了 console.* 入口。不过提供了保留此功能的选项
不须打开 Dragonfly 也能调出错误日志(不过,要等到 Opera 12 才有效)
或许你习惯使用 Opera 原生的错误控制台,因为瞬间即可启动,非常快捷。而等到 Opera 12 发布后,或许你会对 Opera Dragonfly 的错误日志更有兴趣,因为到时不须打开 Dragonfly 也能调出错误日志了。
网络查看器
可嗅探通过 POST 方式发送的数据(终于……←_←
性能优化
资源查看器
点击行号即直达错误日志和 CSS 查看器
添加查找功能
工具箱
新增 2D 屏幕尺子。你可以先使用 Dragonfly 的截图功能,然后在上面划出一个矩形区域,就能轻易得到其长和宽的像素值,即使缩放比不是100%也不须你费神换算。