dudo博客

在IEInternet Explorer Developer ToolFirefox插件FireBug发布之后,Opera终于推出了自己的网站开发工具“蜻蜓(Dragonfly)”。蜻蜓是一款面向网站开发者的插件,它主要用于网站在客户端的调试。Opera作为Internet Explorer和Firefox之后的第三大浏览器,很多网页设计者都在尽可能地使自己的页面在Opera中表现的好看一点,蜻蜓Dragonfly的推出为跨浏览器页面设计带来了便利。

下载Dragonfly:http://dragonfly.opera.com
安装:从上面的链接下载到一个Opera9.5b2的安装文件,如果你还没有安装Opera那么直接运行安装,如果你已经安装了Opera,只需运行升级即可。

下面让我们一起揭开Dragonfly的面纱:

1、启动和使用,首先你在Opera浏览器中打开你想要进行分析和调试的网页,然后再在菜单栏中点击“工具”,选择“高级”,在弹出的二级菜单中选择“开发者工具”,启动Dragonfly。

2、Dragonfly启动后,我们发现他在布局上左右两栏布局,功能上主要分为Script、DOM、Console三项。其中,Sript用于调试Javascript、CSS等脚本,DOM用于调试文档的树结构、Console用于错误控制,如javascript和CSS错误等。

3、载入要分析的页面,点击左上角的下拉菜单,选择已经打开的页面,如下图:
dragonfly界面
然后点击dragonfly页面载入按钮载入页面。

4、Sript调试结构如下:
dragonfly Sript调试界面

其中在2区内可以调试Javacrip,如设置断点。断点的设置方法很简单,首先在1区中选择脚本文件如common.js,然后在2区就会显示1区脚本的所有内容,现在只要在代码的左侧点击就可以设置断点。断点的作用就是让脚本运行到此时暂停,这样可以通过3区中的Console控制台来获得当前变量的值等,是调试和跟踪脚本的有效方式。
如我们下面这段JS代码

var i,a;
for (i=0; i<10; i++) {
   a += i;
}
....

如果我们在第3行a+=i;处设置一个断点,刷新页面后,javascript会在第一个循环处停止,等待调试,这时候如果我们在3区的console输入alert("a=" + a);就会弹出“a=0”;现在我们再按F8或者“continue”,第二次循环至此时,两次停止,这次如果输入alert("a=" + a);,就会弹出"a=1"。依此,我们可以跟踪每次循环后a的值。
这只是一个简单的应用,在处理更加复杂的JS问题时,断点调试相当有帮助。此外上排的按钮还提供了其它功能,如跳出执行,执行新JS等。
此外,Dragonfly还可以监视AJAX异步处理,线程监视等。
如果你的页面中使用了iframe或者frameset,那么在scipt的5区中会显示他们的文档结构,这要比FirebugInternet Explorer Developer Tool更加先进。

5、DOM调试

Dragonfly的DOM调试虽然要比Firebug或者Internet Explorer Developer Tools简单一点,但是作为一个Alpha版,他已经具有了很强大的功能。进行DOM选项卡后,在左上区可以查看的引用情况,当前的运行平台信息,如操作系统、浏览器版本等(这对于跨平台、跨浏览器设计都是很重要的信息)。布局和功能上,左侧为DOM结构,右侧为CSS样式表内容。

DOM调试最核心的部分还在于左侧的主体区,如下:

dragonfly DOM调试界面

其中1区为可以调试的页面,如果你的页面中包含了iframe等框架结构,那么可调试页就会有两个或者多个。点击其中的一个,在2区显示DOM结构,在4区显示CSS结构。鼠标单击DOM中的任一节点,在3区会显示该节点的目录层次,并在4区显示该节点上的CSS样式,其中包括直接应用的信息和从父节点上继承的信息,以及继承后又覆盖的信息。

看一下2区上面的按钮作用:
dragonfly DOM调试功能按钮

按钮1:展开文档中的所有节点
按钮2:导出当前DOM结构到文件
按钮3:用鼠标选择节点(在3区和4区会显示相应的信息)
按钮4:鼠标经过是高亮显示,在Opera中鼠标经过第一个节点都会以高亮的形式显示其边界
按钮5:如果节点被删除,在页面中即时体现
按钮6:显示注释信息
按钮7:显示空白(如空格、tab、换行等)
按钮8:以树目录的形式展开DOM结构

在4区最下端(红框),还有两个按钮,Dom Attribute和LayOut,其中DOM Attribute显示的是DOM的相关属性,如:scrollHeigh,nodeValue,nodeName,offsetLeft,offsetTop等有用的信息,这些往往会在Javascrip的DOM调用中用到(如果你用了AJAX技术,这将更加有用)。

Layout显示的是“盒模型”的相关信息,如果你用鼠标选中其中的任一元素,便会在Layout中显示其width、height、Padding、margin等信息,如下图:

dragonfly中的盒模型
这在div+css的布局中是十分有用的,特别是精确布局中。

6、最后来说说console选项卡

console中显示的主要是页面的相关信息,如你的CSS中使用了hack信息,那么Dragonfly就会认为这些hack技术是非法的CSS语法等

综上,蜻蜓(dragonfly)已经具有了Internet Explorer Developer Tool和Firebug的大部分功能,但是他还不能像前二者那样任意地编辑HTML文件。不过在Beta版或者正式版中,这项功能是一定具备的。此外,dragonfly也不能附着在浏览器上,两个窗口来回切换有时候的确不方便。不过作为一个Alpha版我们已经看到了希望。

Dragonfly的出现令人兴奋,特别是对于网站设计者和开发者来说,从此无论是在Firefox还是Internet Explorer下或者Opera下都不用再为调试伤透脑筋了。直观,高效的开发时代已经来临



共有(4)条评论

lijing0033 发表于 2008-5-09 at 18:50 #1楼

我们做开发Opera直接不考虑,浏览器已经够多了,我们需要的是标准,唉,标准啊[reply=dudo,2009-04-25 09:30 PM]为啥不考虑?现在除了IE、Firefox就Opera了[/reply]

[回复]


锐风 发表于 2008-5-14 at 10:43 #2楼

呵呵, 比我写得更专业些..[reply=dudo,2009-04-25 09:30 PM]呵呵,试用了一下,感觉暂时还没有Firebug好用
期望在Beta版和正式版中会有好的表现[/reply]

[回复]


锐风 发表于 2008-5-22 at 10:24 #3楼

@dudo
还有 Safari 呢…[reply=dudo,2009-04-25 09:30 PM]呵呵,机子上没有装Safari,不知道有没有它的插件~[/reply]

[回复]


锐风 发表于 2008-5-23 at 11:27 #4楼

@dudo
Safari 内置了开发工具. 但现在功能还很薄弱. 所以没有人公开发表过文章介绍该工具.[reply=dudo,2009-04-25 09:30 PM]关注,一会我也装一个Safari试试看
P.S.你的博客好像好久没更新了[/reply]

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量