用Firebug调试JavaScript、HTML和CSS

我最近关于《Mozilla的Venkman JavaScript调试器》的文章激起了更喜欢使用Firebug进行调试的TechRepublic成员的强烈反响。尽管我还是坚持我推荐的Venkman JavaScript Debugger，但是我认同免费提供的Firebug对于Firefox来说是一个优秀的开发插件。它是一个集成的用于监视和调试JavaScript、HTML和CSS的工具。下面我们就来看看Firebug的功能和优势。

Firebug概述

Firebug非常有意思的一点是它与Firefox的紧密集成。你可以在浏览器里或者在一个单独的窗口里打开Firebug。如果在浏览器里打开，Firebug会被放在Web页面的底部——一个能够通过单独选项卡或者窗口附在不同页面上的单独实例。

界面上有四个（原文如此——译者注）选项卡——HTML、CSS、Script、DOM、Net——每一个都与页面不同的内容相对应，还有一个用于错误和日志信息的控制台。你可以选择每个选项卡看看对应的页面元素。

使用代码

HTML、CSS、Script和DOM选项卡让你可以窥探到页面各种代码的状况。HTML选项卡代表页面的HTML元素。你可以展开和／或折叠这些元素以查看或隐藏子元素。JavaScript和DOM选项卡也是如此。这一功能让你很容易就能够深入理解页面的源代码。

调试

Firebug为使用JavaScript提供了一个可靠的调试器。你可以在脚本特定的地方设置断点来终止运行，也可以设置条件断点，以便程序在满足某些条件的时候终止运行。此外，调试器还让你能够一次一行地进行单步调试，以便密切监视执行情况。

在使用调试器的时候，堆栈可以提供任何给定时刻的环境快照。这样你可以查看变量，并监视调用堆栈。观察功能让你能够在代码执行的时候观察变量和表达式。JavaScript代码可以被插到页面里以生成调试数据。代码分析器能够生成函数调用报告以及这些调用占用的时间。调试功能在控制台选项卡里。

控制台是我最喜欢的Firebug功能。它让我可以即时执行JavaScript；这在我开发代码的时候非常有用，你可能会关心一段代码的某一行是如何执行的。如果你不记得JavaScript语言的众多功能，那么自动完成功能能够帮你解决问题。除了运行代码，它还会显示JavaScipt的错误消息日志。

Firebug控制台API提供了控制台变量，你可以在Web页面的代码里使用这些变量，以便在脚本执行的时候生成调试信息。它带有很多帮助处理调试的方法，包括log、trace和debug等。

网络活动

通过Net选项卡可以查看与有关页面相关联的网络活动。它会显示所有与页面有关的下载以及每项资源花了多长时间下载。来自于缓存的请求都用颜色加以区分。来自缓存的项目都是浅灰色的，这样你在快速浏览的时候就会知道使用缓存优化页面加载时间的效率情况。

Net带有自己的次级选项卡以过滤需要显示的内容——你可能希望列出所有的元素，或者只列出HTML、CSS、JavaScript、图片，以及Flash元素。XBR选项卡让你可以检查HTTP的标题和服务器响应；当你使用AJAX应用程序的时候，这是一个相当好的功能。

Firebug插件

开放源代码项目的一个重要特点是其他开发人员和公司的贡献。一个典型的例子就是雅虎开发人员网络开发了一个叫做YSlow的Firebug插件。它会按照雅虎关于高性能网站的标准分析一个Web网站。由于是按雅虎的规模设计的，所以这一标准针对的是流量巨大的大型网站，但是它对你的应用程序也许会有好处。

不要使用Firefox？

Firebug Lite工具提供了一套用于其他浏览器的Firebug子功能，它可以用于Internet Explorer、Opera和Safari。这一扩展通过一个在所有希望使用它的任何页面上都有的JavaScript文件来安装。像Firebug这样的开放源代码项目的一个有趣之处是人们和公司都会为它贡献自己的力量！雅虎就在积极地为Firebug项目作贡献。

它是值得花功夫的

Firebug是对Web开发人员的工具箱的一个很好的补充。它提供了揭示和查看Web页面上HTML、CSS或JavaScript如何运行所需要的一切东西。学习和采用新的工具需要花费一段时间，但是如果你是Firefox的用户，那么Firebug是绝对值得花精力去研究一下的。

Tony Patton的职业生涯开始于应用程序开发员，并已经获得了代表其专业水平的Java、VB、Lotus和XML认证。

查看本文的国际来源