一、           前言

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

Firebug6个功能:Console控制台、Html查看器、Css查看器、Script 调试器 Dom查看器、网络状况监视。(图中另一个插件YSlow也会详细介绍),下文将主要介绍介绍这几方面的功能。图1

二、           Console 控制台

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

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

3

控制台还有个重要的作用就是查看脚本的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)

列出HTMLXML ElementXML源树。

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作为输出标题。

posted on 2009-03-25 14:49  云聚工作室  阅读(128)  评论(0编辑  收藏  举报