WEB开发:Firebug和Internet Explorer Developer Toolbar

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

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

新增（或改变）的功能有：

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新创建的元素，都可以方便的查看它“当前”源码。