代码改变世界

IE Dev Toolbar Beta 3 Released

2007-01-10 13:39 Jeffrey Zhao 阅读(...) 评论(...) 编辑 收藏

IE Dev Toolbar已经成为了Web开发中必不可少的工具了,再这之前,我们似乎只能到处去找一些收费的IE插件,并且“偷偷”地寻找破解。直到IE Dev Toolbar的出现,我们终于可以有“免费的午餐”了。个人认为,IE Dev Toolbar的功能还是非常好用的,似乎有点“说多不多,说少不少”,不过从这次Release看来,IE Dev Toolbar的开发团队始终没有闲着。

至少用惯了IE Dev Toolbar的DOM查看器,再去用FireFox下的FireBugs,总是有点不顺手,呵呵。

言归正传,IE Dev Toolbar不久前发布了Beta 3(下载地址),新增(或改变)的功能有:

1、工具栏的打开方式:

现在的IE Dev Toolbar不再会占用工具栏里大量的空间,取而代之的是工具栏里的一个按钮 ,点击它之后就会弹出我们熟悉的IE Dev Toolbar。

2、最常用的操作被列举为单独的按钮:

按照官方说法(似乎也的确是),最常用的几个操作是:“Select Element by Click”、“Refresh”、“Clear Browser Cache”和“View Element Source”(这是个新功能)。它们现在被IE Dev Toolbar单独列举出来,如下:

3、Style Tracer:

查看一个元素的当前样式,这个功能大家都一定接触过,它可以在IE Dev Toolbar右侧看到。据说现在IE Dev Toolbar提供了Style Tracer的能力,也就是说,我们可以查看到这个元素的某个特定样式(例如字体大小)是在哪个CSS类里被定义的,这样就可以避免被CSS的继承关系给搞晕了。

等等,什么是“据说”?非常令人汗颜的是,这个功能我只在“官方说法”中找到截图以及使用方式,我自己不曾尝试出这个功能来。从官方Blog里也可以看到,并不是我一个人遇到了这个问题。

不得不说,如果Style Tracer无法使用,IE Dev Toolbar这次更新的效果就会大打折扣了。

4、View Source:

刚才也提到过新增的View Source功能,它的作用是可以查看一个特定元素的HTML。

这有什么用?我们本来不就可以查看页面的HTML吗?

这就是View Source这个功能的神奇之处,就在于它显示的不是浏览器从服务器端那里得到的HTML,而是通过DOM进行“逆向工程”之后得到的HTML。于是现在我们就可以放心地从浏览器里选择一个元素,无论它在页面刚打开时是什么样子,甚至于它是在页面运行过程中使用JavaScript新创建的元素,都可以方便的查看它“当前”源码。

 

不管怎么样,IE Dev Toolbar总是越做越做好了。而且现在还是Beta 3,不知道等它正式发布之后,会不会给我们带来更大的惊喜。