WEB开发调试利器:Firebug 和 Internet Explorer Developer Toolbar
Firebug http://getfirebug.com/
主要功能
- Inspect and edit HTML
- Tweak CSS to perfection
- Visualize CSS metrics
- Monitor network activity
- Debug and profile JavaScript
- Quickly find errors
- Explore the DOM
- Execute JavaScript on the fly
- Logging for JavaScript
对于WEB开发人员来说,可以非常方便的得到自己想要的信息:HTML、DOM、CSS、JS,甚至各个文件的下载时间。
Internet Explorer Developer 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新创建的元素,都可以方便的查看它“当前”源码。