Firebug快速入门（一）

 

一、           前言

Firebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让 人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。

Firebug有6个功能：Console控制台、Html查看器、Css查看器、Script 调试器 、Dom查看器、网络状况监视。（图中另一个插件YSlow也会详细介绍），下文将主要介绍介绍这几方面的功能。

 

 

二、           Console 控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加 详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、 URL，http头以及回馈的内容，原本似乎在幕后运作的程序被清清楚楚地展示在你面前。

你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

 

 

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：

console.log("hello world")

此外console对象还有很多相应的调试方法

函数	说明
console.log(object[, object, ...])	向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。 第一参数可以包含格式化文本，例如： console.log(‘这里有%d个%s’,count,apple); 字符串格式： %s ：字符串。 %d, %i：数字。 %f：  浮点数。 %o -超链接对象。
console.debug(object[, object, ...])	向控制台输出一个信息，信息包含一个超链接链接到输出位置。
console.info(object[, object, ...])	向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.warn(object[, object, ...])	向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.error(object[, object, ...])	向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.assert(expression[, object, ...])	测试一个表示是否为true，如果为false，提交一个例外信息到控制台。
console.dir(object)	列出对象的所有属性。
console.dirxml(node)	列出HTML或XML Element的XML源树。
console.trace()	输出堆栈的调用入口。
console.group(object[, object, ...])	将信息分组再输出到控制台。通过console.groupEnd()结束分组。
console.groupEnd()	结束分组输出。
console.time(name)	创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。
console.timeEnd(name)	停止名称为name的计时器并输出执行时间。
console.profile([title])	开始对脚本进行性能测试，title为测试标题。
console.profileEnd()	结束性能测试。
console.count([title])	计算代码的执行次数。titile作为输出标题。